Slider Layout
Tested with Version 1.90 Build 9642
download lss example – right click on this link and save the file
download template (rs11001) – right click on this link and save the file
- Create a “Multiple numerical input” question
- Click on “Show advanced settings”

- Put in your settings

- Create your answer

- In your template.css you define the layout of the slider question
In this example we have the following css code:
/** UI Slider **/
.numeric-multi label.slider-label {
display: table-cell;
width: auto !important;
padding: 0 1em 0.2em 0;
margin-top: 1.3em;
vertical-align: middle;
}.numeric-multi div.multinum-slider {
width: auto;
float: left;
margin-top: 1.5em;
margin-bottom: 0.2em;
}.multinum-slider .ui-state-default {
background: none red;
border:2px solid green;
}.multinum-slider .ui-widget-content {
background: none;
border:1px solid blue;
}.ui-slider-disabled .ui-slider-handle {
opacity: 0.5;
filter: alpha(opacity = 50);
}.ui-slider-1 {
width: 200px;
height: 9px;
margin-bottom: 20px;
}.ui-slider-2 {
width: 200px;
height: 23px;
position: relative;
background-image: url(../../images/slider-bg-2.png);
background-repeat: no-repeat;
background-position: center center;
}.slider_callout {no-repeat;
height: 20px;
width: 100px;
overflow: hidden;
position: absolute;
top: -21px;
margin-left: -3px;
font-family: 'Myriad Pro';
color: #284a6e;
font-weight: bold;
vtext-align: left;
}.slider_showmin {
float: left;
width: 50px;
margin: 15px 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: normal;
text-align: left;
}.slider_showmax {
float: right;
width: 50px;
margin: 15px 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7em;
font-weight: normal;
text-align: right;
}.slider_lefttext {
display: table-cell;
padding-top: 1.5em;
padding-right: 11px;
padding-bottom: 3px;
vertical-align: top;
text-align: right;
font-size: 0.9em;
}.slider_righttext {
display: table-cell;
padding-top: 1.5em;
padding-left: 11px;
padding-bottom: 3px;
vertical-align: top;
font-size: 0.9em;
}
- The question is now as following:
