javascript 带有拖动手柄/滑块值的 jQuery 滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5800714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery slider with value on drag handle/slider
提问by indit
I am trying to display the value of the slider inside the drag handle (slider). Any resouce provided is much appreciated. I am using jQuery 1.5.1
我试图在拖动手柄（滑块）内显示滑块的值。非常感谢提供的任何资源。我正在使用 jQuery 1.5.1
Thanks
谢谢
回答by Sylvain
Are you using jQuery UI Slider ?
你在使用 jQuery UI Slider 吗？
If so, this is a solution :
如果是这样，这是一个解决方案：
$("#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);
}
});
回答by Joseph de Ronde
Just wanted to add a little to the answer.
只是想在答案中添加一点。
If you are setting an initial value, or you would like the text to appear on the handle before the slide method is called you will need to add the document ready bit at the bottom, but i have also condensed the code a little
如果您正在设置初始值，或者您希望在调用幻灯片方法之前将文本显示在句柄上，您将需要在底部添加文档就绪位，但我也稍微压缩了代码
// 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);
});
回答by Max P
Thx all, I have solution for jQuery ui slider with value on drag different handles.
Example for 2 handles:
感谢所有，我有 jQuery ui 滑块的解决方案，其中包含拖动不同手柄的值。2 个手柄的
示例：
$("#wt-altitude-range").slider({
range: true,
min: 0,
max: 3000,
values: [ 100, 2500 ],
slide: function(event, ui) {
$(ui.handle).text(ui.value);
}
});
Work for slide event. ui.handle - current handle, ui.value - current value.
为幻灯片活动工作。ui.handle - 当前句柄，ui.value - 当前值。
