拖动滑块时显示值的jQuery滑块组件

Question

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

谢谢。

- indit

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 示例

- Sylvain

Answer 2

我想补充一下答案。

如果您想设置一个初始值，或者在调用滑块方法之前希望文本出现在滑块上，您需要在底部添加文档就绪的代码，但我也将代码进行了简化。

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

- Joseph de Ronde

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 - 当前值。

- Max P

---

嗨@maxp，你能想到一种在加载或更改时为两个手柄设置它们的方法吗？ - mike

@mike，嗨！你可以阅读这个http://api.jqueryui.com/slider/ - 事件块。要进行更改-尝试更改事件，要加载-创建可能） - Max P