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.";}