jQuery UI Slider (réglage programmatique)

Question

J'aimerais pouvoir modifier les curseurs à la volée. J'ai essayé de le faire en utilisant

$("#slider").slider("option", "values", [50,80]);

Cet appel définira les valeurs, mais l'élément ne mettra pas à jour les positions du curseur. Appeler

$("#slider").trigger('change');

n'aide pas non plus.

Existe-t-il une autre/meilleure façon de modifier la valeur ET la position du curseur ?

Answer 1

Cela dépend si vous souhaitez modifier les curseurs dans la plage actuelle ou modifier la plage des curseurs.

Si ce sont les valeurs de la plage actuelle que vous voulez modifier, alors la méthode .slider() est celle que vous devez utiliser, mais la syntaxe est un peu différente de celle que vous avez utilisée :

$("#slider").slider('value',50);

ou si vous avez un curseur avec deux poignées, ce serait :

$("#slider").slider('values',0,50); // sets first handle (index 0) to 50
$("#slider").slider('values',1,80); // sets second handle (index 1) to 80

Si c'est la gamme que vous voulez modifier, ce sera le cas :

$("#slider").slider('option',{min: 0, max: 500});

Answer 2

Pour moi, cela déclenche parfaitement l'événement slide sur UI Slider :

hs=$('#height_slider').slider();
hs.slider('option', 'value',h);
hs.slider('option','slide')
       .call(hs,null,{ handle: $('.ui-slider-handle', hs), value: h });

N'oubliez pas de définir la valeur par hs.slider('option', 'value',h); avant le déclenchement. Dans le cas contraire, le gestionnaire du curseur ne sera pas synchronisé avec la valeur.

Il convient de noter que h est l'index/position (et non la valeur) dans le cas où vous utilisez le html select .

Answer 3

Aucune des réponses ci-dessus n'a fonctionné pour moi, peut-être étaient-elles basées sur une ancienne version du cadre ?

Tout ce que j'avais à faire était de définir la valeur du contrôle sous-jacent, puis d'appeler la méthode de rafraîchissement, comme indiqué ci-dessous :

$("#slider").val(50);
$("#slider").slider("refresh");

Answer 4

La réponse de Mal est la seule qui ait fonctionné pour moi (peut-être que jqueryUI a changé), voici une variante pour traiter une plage :

$( "#slider-range" ).slider('values',0,lowerValue);
$( "#slider-range" ).slider('values',1,upperValue);
$( "#slider-range" ).slider("refresh");

Answer 5

Il est possible de déclencher manuellement des événements de ce type :

Appliquer le comportement du curseur à l'élément

var s = $('#slider').slider();

...

Régler la valeur du curseur

s.slider('value',10);

Déclencher l'événement de glissement, en passant un objet d'interface utilisateur.

s.trigger('slide',{ ui: $('.ui-slider-handle', s), value: 10 });