Pasek suwaka jQuery z wypełnieniem paska postępu

Question

Poszukuję implementacji interfejsu jQuery, aby pasek suwaka wypełniał jedną stronę paska kolorem, przeciągając uchwyt wzdłuż linii postępu. Czy ktoś może mi dać wskazówki, w jaki sposób mogę podejść do tego problemu?

Z góry dziękuję.

Answer 1

Prawdopodobnie powinienem był bliżej przyjrzeć się slider() documentation. Oto znacznie łatwiejszy sposób zrobienia tego, co myślę, że szukasz. Jest już wbudowany w interfejs użytkownika jQuery. Poniższy przykład jest pobierany bezpośrednio ze strony dokumentacyjnej jQuery slider(), którą połączyłem z powyższym. Kluczem jest właściwość range przekazana do opcji. Nadanie tej wartości wartości "min" spowoduje, że suwak wypełni lewą stronę kolorem.

Kod JavaScript:

$(function() { 
    $("#slider-range-min").slider({ 
     range: "min", 
     value: 37, 
     min: 1, 
     max: 700, 
     slide: function(event, ui) { 
      $("#amount").val('$' + ui.value); 
     } 
    }); 
    $("#amount").val('$' + $("#slider-range-min").slider("value")); 
}); 

Znaczniki:

<div id="slider-range-min"></div>