Подключите ползунок к списку, отмечая определенное значение

Question

Я хочу реализовать функцию, которая позволяет пользователю перетаскивать ползунок, который связан со списком со значениями.Значение, ближайшее к ползунку, станет «активным», когда пользователь перетаскивает его, как показано на изображении в качестве примера -

http://staffanestberg.com/example.png

Я смотрел в плагин jQuery UI Sliderно из того, что я понимаю, это не может быть связано с таким списком.Не уверен, с чего начать на самом деле.Есть предложения?

Answer 1

Ну, вы можете просто создать ползунок с соответствующим минимальным / максимальным диапазоном и отдельным списком значений.Используя событие slide ползунка, вы можете получить значение всякий раз, когда пользователь перетаскивает ползунок, определять, какое из значений ближе всего, и выделять соответствующий элемент списка.

См. Эту скрипку: http://jsfiddle.net/d3zqY/1/

Первый бит просто получает список li элементов и массив значений внутри них.Затем вызывается функция onslide, передающая значение.Есть немного математики для определения ближайшего числа, затем немного jQuery для применения класса к соответствующему элементу.

Так что все, что осталось, это подключить эту функцию к вашему ползунку.

var s = $('#slider');
s.slider({
    min:10000,
    max:1000000,
    slide:function(){
        onslide(s.value());
        }
    });

(Кстати, с точки зрения пользователей, я также ожидал бы, что смогу щелкнуть значение и ползунок для автоматической регулировки.)