<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
 
    insertSlider (QQ);
 
    function insertSlider (qID) {
 
      $('#question'+qID+' select').each(function(i, el){
 
        // Hide the dropdown
         $(el).hide();
 
        var id = $(el).attr('id').replace(/#/g,'-');
        
        // Some dropdown values
        var currentVal = Number($('option:selected', el).val());
        var firstVal = Number($('option[value!=""]:first', el).val());
        var secondVal = Number($('option[value!=""]:first', el).next('option').val());
        var lastVal = Number($('option:last', el).val());
 
        // Insert a a container for the slider
        var container = $('<div class="customSliderWrapper"></div>').insertAfter(el);
 
        // Insert a callout
        var callout = $('<div id="callOut-'+id+'" class="customCallout"></div>').appendTo(container).text($('option:selected', el).val());
 
        // Initiate the slider
        var slider = $('<div id="slider-'+id+'" class="customSlider"></div>').appendTo(container).slider({
          min: firstVal,
          max: lastVal,
          range: 'min',
          value: currentVal,
          step: secondVal - firstVal,
          slide: function( event, ui ) {
            $('option[value="'+ui.value+'"]', el).attr('selected', 'selected');
            //$('#callOut-'+id).text($('option:selected', el).val()).css({'left': $('#slider-'+id+' .ui-slider-handle').css('left')});
 
            function updateCustomCallout() {
              $('#callOut-'+id).text($('option:selected', el).val()).css({'left': $('#slider-'+id+' .ui-slider-handle').css('left')});
            }
            // Delay updating the callout because it was picking up the last postion of the slider
            setTimeout(updateCustomCallout, 10);
          }
        });
 
        // Change the slider if the dropdown is changed
        // (not required if dropdown is hidden)
        $(el).change(function() {
          slider.slider('value', Number($('option:selected', el).val()));
          $('#callOut-'+id).text($('option:selected', el).val());
        });
 
        // Set a value as soon as the slider handle is clicked
        $('#slider-'+id+' .ui-slider-handle').mousedown(function() {
          $('option[value="'+slider.slider('value')+'"]', el).attr('selected', 'selected');
          $('#callOut-'+id).text(slider.slider('value'));
        });
      });
    }
 
  });
</script>

.customCallout {
  position: relative;
  width: 50px;
  text-align: left;
  height: 1.75em; 
  font-weight: bold;
  margin-left: -0.3em;
}
 
.customSliderWrapper {
  position: relative;
  margin: 0 10px;
}