Set up your array-numbers with a Minimum value = 0, Maximum value = 5 and Step value = 1.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
$('select', thisQuestion).each(function(i, el){
// Identify some elements
var thisSelect = $(this);
var thisCell = $(thisSelect).closest('td.question-item');
var thisRow = $(thisSelect).closest('tr.subquestions-list');
var otherCell = $(thisRow).find('td.question-item').not(thisCell);
var otherSelect = $('select', otherCell);
// Hide the dropdown
$(thisSelect).hide();
// Some dropdown values
var currentVal = Number($('option:selected', thisSelect).val());
var firstVal = Number($('option[value!=""]:first', thisSelect).val());
var secondVal = Number($('option[value!=""]:first', thisSelect).next('option').val());
var lastVal = Number($('option[value!=""]:last', thisSelect).val());
// Insert a container for the slider
var container = $('<div class="customSliderWrapper"></div>').insertAfter(thisSelect);
// Initiate the slider
var thisSlider = $('<div class="customSlider"></div>').appendTo(container).slider({
min: firstVal,
max: lastVal,
range: 'min',
value: currentVal,
step: secondVal - firstVal,
slide: function( event, ui ) {
// Load the value for this slider
$(thisSelect).val(ui.value);
$('input:hidden', thisCell).attr('value', $(thisSelect).val());
$('.slider-callout', thisCell).text($(thisSelect).val());
// Adjust the other slider in this row
$(otherSelect).val(lastVal - $(thisSelect).val());
$('input:hidden', otherCell).attr('value', $(otherSelect).val());
$('.ui-slider', otherCell).slider('value', $(otherSelect).val());
$('.slider-callout', otherCell).text($(otherSelect).val());
}
});
// Insert a callout
var callout = $('<div class="slider_callout slider-callout"></div>').appendTo($('.ui-slider-handle', thisCell)).text($('option:selected', el).val());
// Set a value as soon as the slider handle is clicked
$('.ui-slider-handle', thisCell).mousedown(function() {
// Load the value for this slider
$(thisSelect).val(thisSlider.slider('value'));
$('input:hidden', thisCell).attr('value', $(thisSelect).val());
$('.slider-callout', thisCell).text($(thisSelect).val());
// Adjust the other slider in this row
$(otherSelect).val(lastVal - $(thisSelect).val());
$('input:hidden', otherCell).attr('value', $(otherSelect).val());
$('.ui-slider', otherCell).slider('value', $(otherSelect).val());
$('.slider-callout', otherCell).text($(otherSelect).val());
});
});
});
</script>
Topic Author
