jQuery UI Slider (programmgesteuert einstellen)

Ich möchte die Schieberegler im laufenden Betrieb ändern. Ich habe versucht, dies mit zu tun

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

Dieser Aufruf setzt die Werte, aber das Element aktualisiert die Schiebereglerpositionen nicht. Berufung

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

hilft auch nicht.

Gibt es eine andere / bessere Möglichkeit, den Wert UND die Position des Schiebereglers zu ändern?

Dies hängt davon ab, ob Sie die Schieberegler im aktuellen Bereich oder den Bereich der Schieberegler ändern möchten.

Wenn es sich um die Werte im aktuellen Bereich handelt, die Sie ändern möchten, sollten Sie die Methode .slider () verwenden, die Syntax unterscheidet sich jedoch geringfügig von der von Ihnen verwendeten:

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

oder wenn Sie einen Schieberegler mit zwei Griffen haben, wäre dies:

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

Wenn es sich um den Bereich handelt, den Sie ändern möchten, ist dies:

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

Für mich löst dies ein Dia-Ereignis auf dem UI Slider perfekt aus:

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

Vergessen Sie nicht, den Wert hs.slider('option', 'value',h); vor dem Trigger einzustellen . Andernfalls ist der Schieberegler-Handler nicht mit dem Wert synchron.

Eine Sache, die hier zu beachten ist, ist, dass hIndex / Position (nicht Wert) ist, falls Sie HTML verwenden select.

Keine der oben genannten Antworten hat bei mir funktioniert, vielleicht basierten sie auf einer älteren Version des Frameworks?

Ich musste lediglich den Wert des zugrunde liegenden Steuerelements festlegen und dann die Aktualisierungsmethode wie folgt aufrufen:

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

Mals Antwort war die einzige, die für mich funktioniert hat (vielleicht hat sich jqueryUI geändert). Hier ist eine Variante für den Umgang mit einem Bereich:

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

Ein Teil der @ gaurav-Lösung funktionierte für jQuery 2.1.3 und JQuery UI 1.10.2 mit mehreren Schiebereglern. Mein Projekt verwendet vier Bereichsregler, um Daten mit diesem filter.js-Plugin zu filtern . Andere Lösungen setzten die Schiebereglergriffe wieder auf ihre Startendpunkte zurück, aber anscheinend lösten sie kein Ereignis aus, das filter.js verstand. So habe ich die Schieberegler durchlaufen:

$("yourSliderSelection").each (function () {
    var hs = $(this); 
    var options = $(this).slider('option');

    //reset the ui
    $(this).slider( 'values', [ options.min, options.max ] ); 

    //refresh/trigger 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]
        }
    );

});

Der hs.slider()Code setzt die Daten zurück, in meinem Szenario jedoch nicht die Benutzeroberfläche. Hoffe das hilft anderen.

Es ist möglich, Ereignisse wie diese manuell auszulösen:

Wenden Sie das Schiebereglerverhalten auf das Element an

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

...

Stellen Sie den Schiebereglerwert ein

s.slider('value',10);

Lösen Sie das Folienereignis aus und übergeben Sie ein UI-Objekt

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

Wenn Sie die Schiebereglerwerte mehrerer Eingaben ändern müssen, verwenden Sie diese:

html:

<input type="text" id="amount">
<input type="text" id="amount2">
<div id="slider-range"></div>

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/

Ich wollte sowohl den Schieberegler als auch die Eingabebox aktualisieren. Für mich funktioniert das Folgen

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

wo aist Objekt wie folgt.

 var a= $( "<div id='slider' style='width:200px;margin-left:20px;'></div>" ).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()  );
        });

In meinem Fall mit jquery Schieberegler mit 2 Griffen nur folgend funktioniert.

$('#Slider').slider('option',{values: [0.15, 0.6]});

Beim Start oder Aktualisieren Wert = 0 (Standard) So erhalten Sie den Wert von der http-Anforderung

 <script>
       $(function() {
         $( "#slider-vertical" ).slider({
    animate: 5000,
    orientation: "vertical",
    range: "max",
    min: 0,
    max: 100,
    value: function( event, ui ) {
        $( "#amount" ).val( ui.value );

  //  build a URL using the value from the slider
  var geturl = "http://192.168.0.101/position";

  //  make an AJAX call to the Arduino
  $.get(geturl, function(data) {

  });
  },
    slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );

  //  build a URL using the value from the slider
  var resturl = "http://192.168.0.101/set?points=" + ui.value;

  //  make an AJAX call to the Arduino
  $.get(resturl, function(data) {
  });
  }
  });

$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );

});
   </script>

Schließlich funktioniert unten für mich

$ ("# priceSlider"). slider ('option', {min: 5, max: 20, value: [6,19]}); $ ("# priceSlider"). slider ("refresh");

Hier ist die Arbeitsversion:

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