Wie aktualisiere ich einen jQuery UI Slider, nachdem ich Min- oder Max-Werte festgelegt habe?

Question

Ich habe einen ui.slider und ändere zur Laufzeit die Min- und Max-Werte.Diese Änderungen werden jedoch erst in der Ansicht wiedergegeben, wenn ich die Werte auch danach festlege (wodurch Ereignisse ausgelöst werden, die nicht benötigt werden).Meiner Meinung nach sollte es die Ansicht aktualisieren, nachdem min und max eingestellt wurden.Gibt es eine einfache Problemumgehung, scheint eine Aktualisierungsmethode für den Schieberegler zu fehlen.

$("#something").slider({
    range: true,
    values: [25, 75],
    min: 0,
    max: 100
});
$("#something").slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
$("#something").slider("option", "values", [25, 75]); // the left handle is now at the left end, but doing this triggers events

Bearbeiten Dieses Problem wurde in jQuery UI 1.9 behoben

Answer 1

Ich weiß nicht, ob dies ein Fehler im Schieberegler der jQuery-Benutzeroberfläche ist, aber Sie können trotzdem den aktuellen Wert ändern (technisch gesehen den aktuellen Wert auf den aktuellen Wert setzen ...), um die Ansicht zu erzwingenerfrischt werden.Nach der Dokumentation würde dies Folgendes bedeuten:

$(function() { 
    var $slide = $("#something").slider({
        range: true,
        values: [25, 75],
        min: 0,
        max: 100
    });
    $slide.slider("option", "min", 25); // left handle should be at the left end, but it doesn't move
    $slide.slider("value", $slide.slider("value")); //force the view refresh, re-setting the current value
});  

Answer 2

Das Problem mit der Neupositionierung des Handles wurde behoben. Rufen Sie einfach diese Funktion auf.

function resetSlider(){
    $("#slider-fill").attr('value',maxPrice);
    $("input[type='range']").slider( "refresh" );//refresh slider to max value
    $(".ui-slider-handle").css("left","100%");
    console.log("Slider Reset Done.");
}

Answer 3

Festlegen des minimalen Schiebereglerwerts wie folgt:

$slide.slider("option", "min", 25); funktioniert bei mir nicht.

Stattdessen habe ich: $slide.slider("values", "0", 25); verwendet und alles funktioniert einwandfrei.

Verwenden Sie zum Festlegen des maximalen Schiebereglerwerts den $slide.slider("values", "1", 75);

Weitere Informationen zum Festlegen von Werten finden Sie in den API-Dokumenten - http://api.jqueryui.com / slider / # Optionswerte

Answer 4

Versuchen Sie dies.

valPercent = (current_slide_value - min_value) / (max_value - min_value) * 100;     
parentElem.find('.ui-slider-range').css('width', valPercent+'%');    
parentElem.find('.ui-slider-handle').css('left', valPercent+'%');

Answer 5

Es könnte ein Versionsproblem sein, aber nichts, was ich mit den Optionen "min / max" versucht habe, hat funktioniert.Dies ist in Ordnung und wurde mit JQuery UI 1.10 getestet.Auf diese Weise können Sie entweder den Schieberegler oder die Zahlen verwenden, um den anderen zu ändern:

$("#mySlider").slider({range: true, min: 0, max: 100, values: [ 0, 100 ], step: 10,
   slide: function( event, ui ) {
      $("#mySliderMin").val( ui.values[ 0 ]);
      $("#mySliderMax").val( ui.values[ 1 ]);
   }
});
$("#mySliderMin").val($("#mySlider").slider( "values", 0 ));
$("#mySliderMax").val($("#mySlider").slider( "values", 1 ));
$("#mySliderMin, #mySliderMax").change(function () {
   $("#mySlider").slider("values", 0, $("#mySliderMin").val());
   $("#mySlider").slider("values", 1, $("#mySliderMax").val());
});

Answer 6

Sie können das HTML-Div in der jquery-Funktion als aktualisieren

var d='<div class="row grid_slider"><div><p>Grid With time in 24 hour format</p><input type="text" class="range_time24" value="" name="range" /></div></div>';document.getElementById("slider").innerHTML=d;

Setzen Sie dann neue Werte auf den Schieberegler

Answer 7

Bitte versuchen Sie Folgendes:

$("#Slider2").slider("value", 10, 1000); //10 = min and 1000 = max 

Answer 8

Sie müssen einen Verweis auf Ihr Schiebereglerobjekt behalten,

var slider = $("#something").slider({
               range: true,
               values: [25, 75],
               min: 0,
               max: 100
             });
slider.slider("option", "min", 25);

Dies ist alles in der Dokumentation aufgeführt