jQuery UI Slider: переместите значение вместе (с) дескриптором

Я использовал компонент слайдера пользовательского интерфейса jQuery на своей странице, чтобы установить диапазон цен. Я также могу использовать их 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 ]);
        }
});

slider jquery-ui jquery-ui-slider
person Dan    schedule 14.09.2011    source источник

Ответы (6)


arrow_upward
23
arrow_downward

Вы можете использовать служебную функцию .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/.

person William Niu    schedule 15.09.2011
comment
Это та же проблема, что и у меня, если ползунок создается за пределами экрана, метка находится выше ручки, а не ниже. Добавьте margin-top: 1000px; в CSS слайдера, и вы увидите проблему. - person Illuminati; 11.08.2015

arrow_upward
7
arrow_downward

Я бы просто поместил метки внутри ручек вместо того, чтобы постоянно их перемещать, как в этом ответе: https://stackoverflow.com/a/7431057/1250436

$("#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); }
});

Обновлять

Это не работает в Chromium для Linux. Возникает странная ошибка gfx.

См. Рабочую демонстрацию: http://jsfiddle.net/ohcibi/RvSgj/2/

person ohcibi    schedule 02.04.2013

arrow_upward
2
arrow_downward

change => Это событие запускается при остановке слайда или при программном изменении значения (методом значения). Принимает аргументы event и ui. Используйте event.originalEvent, чтобы определить, было ли значение изменено мышью, клавиатурой или программно. Используйте ui.value (ползунки с одной ручкой), чтобы получить значение текущего дескриптора, $ (this) .slider ('values', index), чтобы получить значение другого дескриптора.

http://docs.jquery.com/UI/Slider#event-change

person micrub    schedule 12.06.2012
comment
это не был прямой ответ на исходный вопрос, но он оказался именно тем, что мне было нужно. Спасибо! - person Greg Detre; 25.01.2013

arrow_upward
2
arrow_downward

Я преследовал ту же цель и решил использовать всплывающие подсказки 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 );
            }
        })();
    }
});

Надеюсь, это кому-то поможет.

person Crystark    schedule 18.02.2014

arrow_upward
2
arrow_downward

Можно создать хороший слайдер, включив всплывающие подсказки при загрузке. Вот обновленная версия слайдера с всплывающими подсказками при загрузке. 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))
    }
});
person ykay says Reinstate Monica    schedule 19.08.2015

arrow_upward
1
arrow_downward

вы можете легко найти его в официальной документации страницы слайдера jQyeryUI в следующем примере

http://jqueryui.com/slider/#custom-handle

person mustafa-elhelbawy    schedule 24.03.2017