Question

我试图在拖动手柄（滑块）内显示滑块的值。任何提供的资源都非常感谢。我正在使用jQuery 1.5.1

由于

Answer 1

您使用的是jQuery UI Slider吗？

如果是这样，这是一个解决方案：

$("#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 example here

Answer 2

只是想补充一点答案。

如果您正在设置初始值，或者您希望在调用slide方法之前文本显示在句柄上，则需要在底部添加文档就绪位，但我还将代码压缩了一点

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

Answer 3

总而言之，我有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);
    }
});

为幻灯片活动工作。 ui.handle - 当前句柄，ui.value - 当前值。

jQuery滑块，拖动手柄/滑块上的值

3 个答案: