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'; 
     } 

達到最大值的顏色代碼