Limesurvey – Slider Layout

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

The css code for the slider layout is at the end of the css file.

  1. Create a “Multiple numerical input” question
  2. Click on “Show advanced settings”

  3. Put in your settings

  4. Create your answer
  5. 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;
    }

  6. The question is now as following:

Post to Twitter

Comments are closed.