jQuery滑块与值在拖动手柄/滑块

Question

我试图在拖动句柄(slider)内显示滑块的值。非常感谢提供的任何资源。我使用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示例在这里

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。句柄-当前句柄，ui。