.ui-slider.vertical-slider {
  background: none pink;
}
 
.ui-slider.vertical-slider .ui-slider-range {
  background: none red;
}

// NO EDITING REQUIRED BELOW HERE
 
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
 
  $.fn.lsVerticalSlider = function(options) {  
 
    // The defaults, extended and modified with any passed in the function call
    var opts = $.extend( {
      minValue    :0, 
      maxValue    :100, 
      startValue    :'',
      step      :1,
      height      :150, 
      recordStart    :false,
      showMin      :false,
      showMax      :false
    }, options);
 
    return this.each(function() { 
 
      var $this = $(this);
 
      // Some classes for the question and sub-questions
      $this.addClass('vertical-slider-question');
      $('li', $this).addClass('vertical-slider-sub-question');
 
      // Loop through the sub-questions
      $('li', $this).each(function(i){
 
        //Get the ID for this answer
        //var firstInput = $(this).find("input:first-child");
        var itemID = $(this).find("input:first-child").attr('id').replace(/answer/, '');
        // Check for pre-existing answer
        if($('#answer'+itemID).val() != '') {
          opts.startValue = $('#answer'+itemID).val();
        }
 
        // Insert the slider elements
        $('#answer'+itemID).after(
          '<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
            <div class="vertical-slider-max"></div> \
            <div class="vertical-slider-min"></div> \
          </div> \
          <div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
          <div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
            <div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
          </div>'
        );
 
        // Show min/max if option is set
        if(opts.showMax) {
          $('.vertical-slider-max', $this).text(opts.maxValue);
        }
        if(opts.showMin) {
          $('.vertical-slider-min', $this).text(opts.minValue);
        }
 
        // Initiate the slider
        $('#vertical-slider-'+itemID).slider({
          orientation: 'vertical',
          range: 'min',
          min: opts.minValue,
          max: opts.maxValue,
          value: opts.startValue,
          step: opts.step,
          slide: function(event, ui) {
            $('#answer'+itemID).val(ui.value);
            $('#slider-callout-'+itemID).text(ui.value);
            setTimeout(function() { 
              $('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
            }, 10);
          },
          create: function(event, ui) {
            // Initial values and positions
            if($('#answer'+itemID).val() != '') { // Pre-existing answer
              $('#slider-callout-'+itemID).text(opts.startValue);
            }
            else if(opts.recordStart) { // Record the start value (if option is set)
              $('#answer'+itemID).val(opts.startValue);
              $('#slider-callout-'+itemID).text(opts.startValue);
            }
            else {
              $('#slider-callout-'+itemID).hide();
            }
            $('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
          }
        });
      });
    });
 
  };
})( jQuery );