JQuery UI Slider Labels под слайдером

Я ограничусь использованием jQuery 1.4.2 и jQuery ui 1.8.5 (это не по выбору, пожалуйста, не просите меня обновляться до последних версий). Я создал слайдер, который показывает текущее значение над панелью слайдов, но теперь мне нужно заполнить легенду под полосой слайда, расположенную так же, как и ползунок (т.е. Если ползунок шириной 100 пикселей и существует пять значений слайдер будет привязывать каждые 20 пикселей. В этом примере я хотел бы, чтобы значения в легенде помещались с интервалом 20 пикселей).

Вот пример того, что я хочу:

Slider

Вот 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.

Ответы

Ответ 1

Чтобы создать легенду, нам нужно знать ширину ползунка и количество элементов, а затем разделите одно на другое:

//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 под слайдером, который содержит живую демонстрацию этой работы.

Ответ 2

Опубликованные решения полностью работоспособны, но вот еще одно решение, которое не требует дополнительных плагинов и создает его (см. fiddle):

a slider with simple labels

Вот как это сделать:

  • Инициировать слайдер.

  • Для каждого из возможных значений добавьте элемент label с position: absolute (ползунок уже position: relative, поэтому метки будут расположены относительно ползунка).

  • Для каждого 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);

    }

});

Ответ 3

Ищете то же самое, и в итоге я использовал слайдер jQuery UI от filamentgroup (он работает как шарм и выглядит стабильным). Я думаю, что со временем его планируется объединить в компоненты пользовательского интерфейса jQuery...

здесь ссылка на статью и пример + минимизированный jsfiddle я сделал

jQuery UI Slider из Select Element - теперь с поддержкой ARIA

Это пример из статьи лаборатории Филаментной группы

Рабочий минимизированный пример jsfiddle - Обновлено и работает

b.t.w, если вы хотите использовать более простой слайдер (без диапазона), все, что необходимо сделать, - удалить второй элемент select

Еще один хороший плагин, который выполняет задание: jslider

Ответ 4

Еще одно решение с пользовательскими метками и без фиксированного размера метки.

JS Bin

Ответ 5

У меня есть простое решение для слайдера с метками, использующими только jquery.

enter image description here

Вы просто настраиваете свой div, где хотите, чтобы ползунок перемещался

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

Затем вызовите метод настройки, который добавит метки к ползунку по соответствующим индексам.

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

см. кодовое перо ниже для полного кода

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