滑块下的 jQuery UI 滑块标签

jQuery UI Slider Labels Under Slider

提问by Richard Parnaby-King

I am limited to using jQuery 1.4.2 and jQuery ui 1.8.5 (this is not by choice, please do not ask me to upgrade to latest versions). I have created a slider that shows the current value above the slide bar, but what I need now is a way to populate a legend below the slide bar distanced the same as the slider (i.e. if the slider is 100px wide and there are five values the slider will snap every 20px. In this example, I would like the values in the legend to be placed at 20px intervals).

我只能使用 jQuery 1.4.2 和 jQuery ui 1.8.5（这不是自愿的，请不要让我升级到最新版本）。我创建了一个滑块，显示滑块上方的当前值，但我现在需要的是一种在滑块下方填充与滑块距离相同的图例的方法（即，如果滑块的宽度为 100 像素，并且有五个值）滑块将每 20 像素对齐一次。在此示例中，我希望图例中的值以 20 像素的间隔放置）。

Here is an example of what I want:

这是我想要的一个例子：

Here is the jQuery I have (assimilated from the ui slider demo page):

这是我拥有的 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.

采纳答案by Richard Parnaby-King

To create a legend, we need to know the width of the slider and the number of elements then divide one against the other:

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

//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>');

The p tag needs to have the style 'display:inline-block' to render correctly, otherwise each label will take one line or the labels will be stacked up right next to each other.

p 标签需要具有样式 'display:inline-block' 才能正确呈现，否则每个标签将占用一行或标签将彼此堆叠在一起。

I have created a post explaining the problem and solution: jQuery UI Slider Legend Under Sliderwhich contains a live demo of this working.

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

回答by chrisfargen

The posted solutions are totally workable, but here is another solution that requires no additional plugins and produces this (see fiddle):

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

Here's how to do it:

这是如何做到的：

1. Initiate the slider.

2. For each of the possible values, append a labelelement with position: absolute(the slider is already position: relative, so the labels will be positioned relative to the slider).

3. For each label, set the leftproperty to a percentage.

1. 启动滑块。

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

3. 对于 each label，将left属性设置为百分比。

CSS

CSS

#slider label {
  position: absolute;
  width: 20px;
  margin-top: 20px;
  margin-left: -10px;
  text-align: center;
}

JS

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);

    }

});

回答by Daniel

Been looking for the same thing and ended up with using the jQuery UI Slider by filamentgroup(It works like a charm and looks stable) I think that in time it is planned to be merged into jQuery UI components...

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

here a ref to the article and example + minimized jsfiddle I did

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

jQuery UI Slider from a Select Element - now with ARIA Support

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

This is an example from the Filament Group Lab Article

这是来自 Filament Group Lab 文章的示例

Working minimized jsfiddle example - Updated and Working

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

b.t.w if one want to use a simpler slider (without range) all is needed to be done is remove the second selectelement

顺便说一句，如果想要使用更简单的滑块（没有范围），所有需要做的就是删除第二个select元素

---

---

Another nice plugin that does the job: jslider

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

回答by Nazar Tereshkovych

One more solution with custom labels and without fixed label size.

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

JS Bin

JS斌

回答by user3284707

I have a simple solution for a slider with labels using only jquery.

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

You simply set up your div where you want the slider to go

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

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

Then call the setup method which will add the labels to the slider at the relevant indexes.

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

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

see the code pen below for full code

完整代码见下方代码笔

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

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