jQuesta barra di scorrimento con riempimento barra di avanzamento

Question

Sto cercando di implementare l'interfaccia utente di jQuery in modo che la barra di scorrimento riempia un lato della barra con un colore mentre trascini la maniglia, una specie di barra di avanzamento. Qualcuno può darmi consigli su come potrei affrontare questo problema?

Grazie in anticipo.

Answer 1

Probabilmente avrei dovuto esaminare più attentamente lo slider() documentation. Ecco un modo molto più semplice per fare ciò che penso tu stia cercando. È già integrato nell'interfaccia utente di jQuery. L'esempio sotto è preso direttamente dalla pagina di documentazione jQuery slider() che ho collegato sopra. La chiave è la proprietà range passata nelle opzioni. Assegnando questo valore a "min", il cursore si riempirà il lato sinistro con un colore.

La 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")); 
}); 

Il markup:

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