Sawtooth Software: The Survey Software of Choice

How to Use jQueryUI Sliders in SSI Web

How can I insert a slider widget into a SSI Web survey. I also want the value to be displayed as you move the slider.

Built into SSI Web 8+ is a JavaScript library called jQueryUI. It provides some user interface elements such as sliders, drag and drops, etc. If you wanted to use the jQueryUI slider widget that displays the current value of the slider, you could use the following code.

Let's create a free format question called "slider". We will create a hidden numeric variable called "slider_value". Then, in the HTML section of the question, insert the following code:

<script>
  $(function () {
    $("#slider-range-min").slider({
      range: "min",
      value: 0,
      min: 0,
      max: 100,
      slide: function (event, ui) {
        $("#slider_value").val(ui.value);
      }
    });
  });
</script>
 
<p>
  <label for="amount">Current value:</label>
  <input name="slider_value" type="text" id="slider_value" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>

The value parameter establishes the start position of the slider. The min parameter is the lower boundary of the slider while the max parameter is the upper boundary. In this case, the slider goes from 0 to 100, with a starting position of 0.

You can also add another parameter to make the slider vertical rather than horizontal. Simply add this line: orientation: "vertical", above the value parameter.

More information about this jQueryUI widget can be found on the jQueryUI website: https://jqueryui.com/slider

If you want to add some JavaScript verification to make sure the person moves the slider and a value is recorded, you could add the following to the question's Advanced Settings > Custom JavaScript Verification tab.

if(!($("#slider_value").val())){var strErrorMessage = "You must select a value.";}

Below is an example of this code in a live survey:

Sawtooth Software

6:30 AM to 5:30 PM Mountain Time
(GMT-6; GMT-7 Autumn/Winter)
Monday through Friday

Phone: +1 801 477 4700
Fax: +1 801 434 5493
Email: support@sawtoothsoftware.com

We are open!

SKIM Software

9:00 AM to 5:30 PM Central European
(GMT+2; GMT+1 Autumn/Winter)
Monday through Friday

Phone: +31 10 282 3500
Fax: +31 10 282 3560
Email: software@skimgroup.com
Online: www.skimgroup.com

Lighthouse Studio

Lighthouse Studio is our flagship software for producing and analyzing online and offline surveys. It contains modules for general interviewing, choice-based conjoint, adaptive choice-based conjoint, adaptive choice analysis, choice-value analysis, and maxdiff exercises.

Try Lighthouse Studio

  Buy Lighthouse Studio