wake-up-neo.com

Wie aktualisiere ich einen jQuery UI Slider nach dem Einstellen von min oder max Werten?

Ich habe einen ui.slider und ändere min und max Werte zur Laufzeit. Diese Änderungen werden jedoch erst in der Ansicht wiedergegeben, wenn ich die Werte auch nachträglich setze (was dazu führt, dass Ereignisse ausgelöst werden, die nicht benötigt werden). Meiner Meinung nach sollte die Ansicht nach dem Einstellen von min und max ebenfalls aktualisiert werden. 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

25

Ich weiß nicht, ob dies ein Fehler im jQuery-UI-Schieberegler ist, aber Sie können den aktuellen Wert ändern (technisch, indem Sie den aktuellen Wert auf den aktuellen Wert setzen), um die Aktualisierung der Ansicht zu erzwingen . 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
});  
28
tsimbalar

Das Problem mit der Neupositionierung des Griffs ist geknackt ... 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.");
}
2
Hardik Thakkar

Einstellen des minimalen Schiebereglers wie:

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

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

Um den maximalen Schiebereglerwert einzustellen, verwenden Sie $slide.slider("values", "1", 75);

Weitere Informationen zum Einstellen von Werten finden Sie in den api docs - http://api.jqueryui.com/slider/#option-values ​​

1
Pinte Dani

Versuche 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+'%');
0
Anand

Sie können das HTML-Div in 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 Schieberegler

0
Junaid Malik

Bitte versuchen Sie das:

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

Es könnte ein Versionsproblem sein, aber ich habe nichts mit den Optionen "min/max" versucht. 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());
});
0
Le Droid