<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());
 
 
        }
      });
 
      // 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());
 
 
      });
    });
  });
</script>

.customSliderWrapper {
    margin: 30px auto 15px;
    width: 90%;
}