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