37

我仅限于使用 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.
4

5 回答 5

63

发布的解决方案是完全可行的，但这是另一个不需要额外插件并产生这个的解决方案（见fiddle）：

带有简单标签的滑块

这是如何做到的：

  1. 启动滑块。

  2. 对于每个可能的值，附加一个label元素position: absolute（滑块已经是position: relative，因此标签将相对于滑块定位）。

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

    }

});
于 2013-06-01T21:58:11.513 回答
21

要创建图例，我们需要知道滑块的宽度和元素的数量，然后将一个与另一个相除：

//store our select options in an array so we can call join(delimiter) on them
var options = [];
for each(var option in el.options)
{
  options.push(option.label);
}

//how far apart each option label should appear
var width = slider.width() / (options.length - 1);

//after the slider create a containing div with p tags of a set width.
slider.after('<div class="ui-slider-legend"><p style="width:' + width + 'px;">' + options.join('</p><p style="width:' + width + 'px;">') +'</p></div>');

p 标签需要具有“display:inline-block”样式才能正确渲染，否则每个标签将占一行，或者标签将彼此相邻堆叠。

我创建了一篇解释问题和解决方案的帖子：jQuery UI Slider Legend Under Slider其中包含此工作的现场演示。

于 2012-04-19T09:26:23.420 回答
12

一直在寻找同样的东西并最终使用了filamentgroup 的 jQuery UI Slider（它的工作原理就像一个魅力并且看起来很稳定）我认为它计划及时合并到 jQuery UI 组件中......

这里是文章和示例的参考 + 我所做的最小化 jsfiddle

来自 Select 元素的 jQuery UI 滑块 - 现在支持 ARIA

这是来自细丝组实验室文章的示例

工作最小化的 jsfiddle 示例 -更新和工作

顺便说一句，如果想使用更简单的滑块（无范围），只需删除第二个select元素

另一个很好的插件可以完成这项工作：jslider

于 2012-08-28T09:48:58.407 回答
8

另一种具有自定义标签且没有固定标签尺寸的解决方案。

JS斌

于 2013-07-18T19:28:45.460 回答
1

对于仅使用 jquery 的带有标签的滑块，我有一个简单的解决方案。

在此处输入图像描述

您只需将 div 设置在您希望滑块移动的位置

<div class="sliderWithLabels" id="mySlider1"></div>

然后调用 setup 方法将标签添加到相关索引处的滑块。

// setupSlider(divId, labelArray, initialIndex);
setupSlider('mySlider3', ["label1", "label2", "label3", "label3"], 3);

请参阅下面的代码笔以获取完整代码

https://codepen.io/larnott/pen/WNeErqE

于 2019-09-02T15:15:04.573 回答