jqueryUI slider-在滑块框中添加一个数字

Question

问题是不言自明的。如何在滑块框中添加数字，以便在移动滑块时，jQueryUI中滑块框内的值会变化？

这是我的jsFiddle。我想在black滑块框中添加值。

Answer 1

http://jsfiddle.net/WP29E/182/

我添加了这个jquery

$('.slider1').on('slide', function(event,ui) {
   var x = $(this).slider('value');
       $('.slider1 .ui-slider-handle').text(x);
});

我在html中添加了一个类

<div class="slider slider1"></div>
<div class="slider slider2"></div>

我刚刚为第一个滑块做了数字，但我相信你现在可以从这里搞清楚了！

Answer 2

使用传递给slide的对象的slider属性。

slide: function( event, ui ) {
  $(ui.handle).text(ui.value);
}

ui提供目标对象以及滑块的当前值。

然后显示初始值：

$('.ui-slider-handle').each(function() {
  $(this).text($(this).parent().slider('value'));
});

这会将每个滑块手柄的文本设置为其父级的滑块值（.ui-slider-handle的父级是.slider）。或者，如果您想使用范围，则需要找到需要从values中选择的元素：

$(this).text($(this).parent().slider('values')[$(this).index()-1]);

JSFiddle for single value

JSFiddle for range