/ / jQuery-Schieberegler mit Wert für Ziehpunkt / Schieberegler - Javascript, Jquery, Schieberegler

jQuery Slider mit Wert bei Drag / slider - javascript, jquery, slider

Ich versuche, den Wert des Schiebereglers im Ziehpunkt (Schieberegler) anzuzeigen. Jede zur Verfügung gestellte Ressource wird sehr geschätzt. Ich verwende jQuery 1.5.1

Vielen Dank

Antworten:

10 für die Antwort № 1

Verwenden Sie den jQuery UI Slider?

Wenn ja, ist dies eine Lösung:

$("#slider").slider({
change: function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
},
slide: function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
}
});

jsFiddle-Beispiel hier


8 für die Antwort № 2

Ich wollte nur ein wenig zur Antwort hinzufügen.

Wenn Sie einen Anfangswert festlegen, werden Sie dies tunWie der Text, der auf dem Ziehpunkt angezeigt wird, bevor die Slide-Methode aufgerufen wird, müssen Sie unten das Dokument-Ready-Bit hinzufügen, aber ich habe den Code auch etwas komprimiert

   // take value from event, ui.value
$("#slider1").slider({
slide: function (event, ui) {
$("#slider").find(".ui-slider-handle").text(ui.value);
}
});

// sets text initially to value of slider, even if a default value is set
$(document).ready(function() {
var value = $("#slider").slider("option","value");
$("#slider").find(".ui-slider-handle").text(value);
});

4 für die Antwort № 3

Alles in allem habe ich eine Lösung für jQuery ui-Schieberegler mit verschiedenen Ziehpunkten.
Beispiel für 2 Griffe:

$("#wt-altitude-range").slider({
range: true,
min: 0,
max: 3000,
values: [ 100, 2500 ],
slide: function(event, ui) {
$(ui.handle).text(ui.value);
}
});

Arbeiten Sie für das Folienereignis. ui.handle - aktuelles Handle, ui.value - aktueller Wert.