slider 下的 jQuery UI slider 标签

Question

我仅限于使用 jQuery 1.4.2 和 jQuery ui 1.8.5(这不是我的选择，请不要要求我升级到最新版本)。我创建了一个 slider ，显示滑动条上方的当前值，但我现在需要的是一种在滑动条下方填充图例的方法，其距离与 slider 相同(即，如果 slider 宽 100 像素，并且有五个值) slider 将每隔 20 像素对齐。在本例中，我希望图例中的值以 20 像素的间隔放置。

这是我想要的示例:

这是我的 jQuery(来自 ui slider 演示页面):

//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.

Answer 1

发布的解决方案完全可行，但这是另一个不需要额外插件并产生此解决方案的解决方案(请参阅 fiddle ):

具体操作方法如下:

1. 启动 slider 。

2. 对于每个可能的值，附加一个带有 position:absolute 的 label 元素( slider 已经是 position:relative ，因此标签将相对于 slider 定位)。

3. 对于每个标签，将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);

    }

});