Curseur d’interface utilisateur jQuery (par programmation)

Cela dépend si vous voulez changer les curseurs dans la plage actuelle ou changer la plage des curseurs.

Si vous souhaitez modifier les valeurs de la plage actuelle, la méthode .slider () est celle que vous devez utiliser, mais la syntaxe est légèrement 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 changer, ce serait:

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

Pour moi, cela déclenche parfaitement l’événement slide sur le slider de l’interface utilisateur:

 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 la gâchette. Sinon, le gestionnaire de curseur ne sera pas synchronisé avec la valeur.

Une chose à noter ici est que h est index / position (pas de valeur) au cas où vous utilisez html select .

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

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 ci-dessous:

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

La réponse de Mal est la seule qui a 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"); 

Il est possible de déclencher manuellement des événements comme celui-ci:

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

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

…

Définir la valeur du curseur

 s.slider('value',10); 

Déclenchez l’événement de diapositive en transmettant un object ui

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

Une partie de la solution @gaurav a fonctionné pour jQuery 2.1.3 et JQuery UI 1.10.2 avec plusieurs curseurs. Mon projet utilise quatre curseurs de plage pour filtrer les données avec ce plugin filter.js . D’autres solutions remettaient à zéro les poignées de curseur à leurs points de départ, mais apparemment, elles ne tiraient pas sur un événement que filter.js avait compris. Alors, voici comment j’ai parcouru les curseurs:

 $("yourSliderSelection").each (function () { var hs = $(this); var options = $(this).slider('option'); //reset the ui $(this).slider( 'values', [ options.min, options.max ] ); //refresh/sortinggger event so that filter.js can reset handling the data hs.slider('option', 'slide').call( hs, null, { handle: $('.ui-slider-handle', hs), values: [options.min, options.max] } ); }); 

Le code hs.slider() réinitialise les données, mais pas l’interface utilisateur dans mon scénario. J’espère que cela aide les autres.

Je voulais mettre à jour le curseur ainsi que la boîte d’entrée. Pour moi, la suite travaille

 a.slider('value',1520); $("#labelAID").val(1520); 

où a object est comme suit.

  var a= $( "
" ).insertAfter( "#labelAID" ).slider({ min: 0, max: 2000, range: "min", value: 111, slide: function( event, ui ) { $("#labelAID").val(ui.value ); } }); $( "#labelAID" ).keyup(function() { a.slider( "value",$( "#labelAID" ).val() ); }); 

Si vous avez besoin de modifier les valeurs de curseur depuis plusieurs entrées, utilisez-le:

html:

js:

  $( "#slider-range" ).slider({ range: true, min: 0, max: 217, values: [ 0, 217 ], slide: function( event, ui ) { $( "#amount" ).val( ui.values[ 0 ] ); $( "#amount2" ).val( ui.values[ 1 ] ); } }); $("#amount").change(function() { $("#slider-range").slider('values',0,$(this).val()); }); $("#amount2").change(function() { $("#slider-range").slider('values',1,$(this).val()); }); 

https://jsfiddle.net/brhuman/uvx6pdc1/1/

Voici la version de travail:

 var newVal = 10; var slider = $('#slider'); var s = $(slider); $(slider).val(newVal); $(slider).slider('refresh');