我限制使用jQuery 1.4.2和jQuery ui 1.8.5(这不是选择，请不要问我升级到最新版本)。我已经创建了一个滑块显示当前值在滑块上，但我现在需要一种方法来填充一个图例下面的滑块与滑块相同的距离(即如果滑块是100px宽，有五个值滑块将每20px捕捉一次。在这个例子中，我想要图例中的值以20px的间隔放置)。
这里是我想要的例子：
这里是我有的jQuery(同化从ui滑块演示页)：
//select element with 5 - 20 options
var el = $('.select');
//add slider
var slider = $( '<div class="slider"></div>' ).insertAfter( el ).slider({
min: 1,max: el.options.length,range: 'min',value: el.selectedIndex + 1,slide: function( event,ui ) {
el.selectedIndex = ui.value - 1;
slider.find("a").text(el.options[el.selectedIndex].label);
},stop: function() {
$(el).change();
}
});
slider.find("a").text(el.options[el.selectedIndex].label); //pre-populate value into slider handle.
解决方法
发布的解决方案是完全可行的，但这里是另一个解决方案，不需要额外的插件，并产生这个(见
fiddle)：
以下是操作方法：
>启动滑块。
>对于每个可能的值，附加一个标签元素与position：absolute(滑块已经是位置：相对，因此标签将相对于滑块定位)。
>对于每个标签，将left属性设置为百分比。
CSS
#slider label {
position: absolute;
width: 20px;
margin-top: 20px;
margin-left: -10px;
text-align: center;
}
JS
// A slider with a step of 1
$("#slider").slider({
value: 4,min: 1,max: 7,step: 1
})
.each(function() {
// Add labels to slider whose values
// are specified by min,max
// Get the options for this slider (specified above)
var opt = $(this).data().uiSlider.options;
// Get the number of possible values
var vals = opt.max - opt.min;
// Position the labels
for (var i = 0; i <= vals; i++) {
// Create a new element and position it with percentages
var el = $('<label>' + (i + opt.min) + '</label>').css('left',(i/vals*100) + '%');
// Add the element inside #slider
$("#slider").append(el);
}
});
