Javascript 在jQuery滑块上方显示编号的间隔

你好

我添加了一个jQuery滑块，现在我想在滑块上方有数字，表示间隔。就像一个日常的统治者。有没有人有快速的方法来实现这一点？

我使用这段代码。
img/current.png-当我点击时，当前图像的路径）

功能设置滑块（选定）{
$（'.slider_item>img'）.remove（）；
$（选定）.html（“”+$（选定）.html（））；
} 
0.5
1.
2.
4.
8.
16
32

看看这个jQuery UI插件：

它实际上是由发起jqueryui的人创建的jqueryui滑块的更复杂版本。然而，这使用了

select

HTML元素而不是list，因此您可能希望从插件中去掉tic添加功能并使用它（不容易，但希望这比编写自己的更好！）

这就是插件使用的内容：

var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)');
jQuery(selectOptions).each(function(i){
    var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ;
    var labelText = (options.labelSrc == 'text') ? this.text : this.value;
    scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>');
});

var scale=sliderComponent.append（“”）.find（‘.ui滑块比例：eq（0）’）；
jQuery（选择选项）。每个函数（i）{
var style=（i==selectOptions.length-1 | | i==0）？'style=“display:none；”：“”；
var labelText=（options.labelSrc=='text'）？this.text:this.value；
scale.append（'
'+labelText+'
'）；
});

---

对于每个

选项

元素，它都会添加一个tic，再向下添加另一个代码块来添加标签。它所做的基本上是向slider元素中注入一个跨度列表，文本直接取自元素的value属性。您还需要相当多的CSS来将其正确地设置为tics

谢谢你的想法，尽管修改插件比较容易。

var scale = sliderComponent.append('<ol class="ui-slider-scale ui-helper-reset" role="presentation"></ol>').find('.ui-slider-scale:eq(0)');
jQuery(selectOptions).each(function(i){
    var style = (i == selectOptions.length-1 || i == 0) ? 'style="display: none;"' : '' ;
    var labelText = (options.labelSrc == 'text') ? this.text : this.value;
    scale.append('<li style="left:'+ leftVal(i) +'"><span class="ui-slider-label">'+ labelText +'</span><span class="ui-slider-tic ui-widget-content"'+ style +'></span></li>');
});