Jquery范围滑块更改背景颜色

Question

这是我的代码。

$(function() { 
$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 100, 
    values: [25, 50], 
    slide: function (event, ui) { 
     $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); 
     console.log(ui.values[1] +'%'); 
     $('#YourDiv').css('width', 100 - ui.values[1] +'%'); 
    } 
}).append('<div id="YourDiv" style="width: 50%"></div>'); 

$("#amount").val("$" + $("#slider-range").slider("values", 0) + 
    " - $" + $("#slider-range").slider("values", 1));}); 

然后，当我将最大值更改为200滑块颜色不会改变良好的顺序。 所以任何人都可以帮助我。

Answer 1

这是更改的200

$("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 200, 
     animate: true, 
     values: [25, 75], 
     start: function(event, ui) { 
      $(ui.handle).find('.ui-slider-tooltip').fadeIn(); 
     }, 

     stop: function(event, ui) { 
      $(ui.handle).find('.ui-slider-tooltip').fadeIn(); 
     }, 

     slide: function(event, ui) { 
      $(ui.handle).find('.ui-slider-tooltip').text(ui.value+' km/hr'); 
       $('#YourDiv').css('width', 100 - (ui.values[1]/2) +'%'); 
     }, 

     create: function(event, ui) { 
      var tooltip = $('<div class="ui-slider-tooltip" />').css({ 
       position: 'absolute', 
       top: '-28px', 
       left: '-1px', 
       width:'80px' 
      }); 
      $(event.target).find('.ui-slider-handle').append(tooltip); 

      // get handles and set up values 
      var firstHandle = $(event.target).find('.ui-slider-handle')[0]; 
      var secondHandle = $(event.target).find('.ui-slider-handle')[1]; 
      firstHandle.firstChild.innerText = 25+' km/hr'; 
      secondHandle.firstChild.innerText = 75+' km/hr'; 
     } 

达到最大值的颜色代码