Barre de défilement jQuery avec remplissage de type barre de progression

Question

Je cherche à implémenter l'interface utilisateur jQuery de sorte que la barre coulissante remplisse un côté de la barre avec une couleur lorsque vous faites glisser la poignée, comme une barre de progression. Quelqu'un peut-il me donner des conseils sur la façon dont je pourrais aborder ce problème?

Merci à l'avance.

Answer 1

Je devrais probablement avoir regardé le slider() documentation de plus près. Voici un moyen beaucoup plus facile de faire ce que je pense que vous cherchez. Il est déjà intégré dans l'interface utilisateur jQuery. L'exemple ci-dessous provient directement de la page de documentation jQuery slider() à laquelle j'ai lié ci-dessus. La clé est la propriété range transmise dans les options. Si vous attribuez cette valeur à "min", le curseur remplit le côté gauche d'une couleur.

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

Le balisage:

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