JQuery UI Slider: перемещение значения вдоль (с) ручки
Я использовал компонент слайдера jQuery UI на своей странице, чтобы установить диапазон цен.
Я также могу использовать их ui.values [] для установки и отображения новых значений в других div.
Как сделать, чтобы увидеть новое значение под дескриптором. То есть если бы я переместил
дескриптор до $100, я хочу установить текст "$ 100" прямо под этим дескриптором.
Кстати, я использую версию диапазона - чтобы установить диапазон цен, поэтому я получил две ручки на моем слайдере (мин. и макс).
var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
range: true,
min: minPriceRange,
max: maxPriceRange,
step: 10,
values: [ minPriceRange, maxPriceRange ],
slide: function( event, ui ) {
("#fromRangeText").text("$" + ui.values[ 0 ]);
$("#toRangeText").text("$" + ui.values[ 1 ]);
}
});
Ответы
Ответ 1
Вы можете использовать функцию утилиты .position
из пользовательского интерфейса jQuery для размещения меток:
$("#slider").slider({
...
slide: function(event, ui) {
var delay = function() {
var handleIndex = $(ui.handle).data('index.uiSliderHandle');
var label = handleIndex == 0 ? '#min' : '#max';
$(label).html('$' + ui.value).position({
my: 'center top',
at: 'center bottom',
of: ui.handle,
offset: "0, 10"
});
};
// wait for the ui.handle to set its position
setTimeout(delay, 5);
}
});
Смотрите действие: http://jsfiddle.net/william/RSkpH/1/.
Ответ 2
Я бы просто поместил метки внутри дескрипторов, а не репозиционировал их все время, как в этом ответе: fooobar.com/questions/344608/...
$("#slider").slider({
range: true,
min: 100,
max: 500,
step: 10,
values: [100, 500],
animate: 'slow',
create: function() {
$('#min').appendTo($('#slider a').get(0));
$('#max').appendTo($('#slider a').get(1));
},
slide: function(event, ui) { $(ui.handle).find('span').html('$' + ui.value); }
});
Update
Это не работает в Chromium для Linux. Возникает странная ошибка gfx.
См. рабочую демонстрацию: http://jsfiddle.net/ohcibi/RvSgj/2/
Ответ 3
change = > Это событие запускается при остановке слайда, или если значение изменяется программно (по методу значений). Принимает аргументы event и ui. Используйте event.originalEvent, чтобы определить, изменилось ли значение с помощью мыши, клавиатуры или программно. Используйте ui.value(однонаправленные слайдеры), чтобы получить значение текущего дескриптора, $(this).slider('values', index), чтобы получить другое значение дескриптора.
http://docs.jquery.com/UI/Slider#event-change
Ответ 4
Я преследовал ту же цель, и я решил пойти с подсказками Bootstrap. Вы можете попробовать код этот JSFiddle.
$('#slider').slider({
range: true,
min: -60,
max: 60,
values: [ init_start_at, init_end_at ],
slide: function(event, ui) {
// Allow time for exact positioning
setTimeout( function(){
$(ui.handle).attr('title', ui.value + '°C').tooltip('fixTitle').tooltip('show');
}, 5);
},
create: function( event, ui ) {
var target = $(event.target);
var handles = $(event.target).find('a');
var container, wait;
// Wait for the slider to be in position
(wait = function() {
if ((container = target.parents('.content')).length != 0) {
handles.eq(0).tooltip({animation: false, placement: 'top',trigger: 'manual', container: container, title: init_start_at + ' °C'}).tooltip('show');
handles.eq(1).tooltip({animation: false, placement: 'bottom',trigger: 'manual', container: container, title: init_end_at + ' °C'}).tooltip('show');
} else {
setTimeout( wait, 50 );
}
})();
}
});
Надеюсь, что это поможет кому-то.
Ответ 5
Можно создать хороший слайдер, включив всплывающие подсказки. Здесь обновлена версия слайдера с помощью всплывающих подсказок. http://jsfiddle.net/ykay/jL044k1c/
function slide(event, ui) {
setTimeout(function () {
$(ui.handle).attr('title', ui.value).tooltip('fixTitle').tooltip('show');
}, 0);
}
function create(event, ui, start, end) {
var handles = $(event.target).find('span');
handles.eq(0).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(0), title: start}).tooltip('show');
handles.eq(1).tooltip({animation: false, placement: 'top', trigger: 'manual', container: handles.eq(1), title: end}).tooltip('show');
}
$('#slider').slider({
range: true,
min: 0,
max: 100,
values: [20, 80],
slide: function (event, ui) {
slide(event, ui)
},
create: function (event, ui) {
create(event, ui, $(this).slider('values', 0), $(this).slider('values', 1))
}
});
Ответ 6
вы можете легко найти его в официальной документации страницы слайдера jQyeryUI в следующем примере
http://jqueryui.com/slider/#custom-handle