jQuery UI Slider: отставание в Chrome

У меня тот же вопрос отсюда: jQuery UI Slider: переместить значение вместе с маркером

"Я использовал компонент ползунка пользовательского интерфейса jQuery на своей странице, чтобы установить диапазон цен. Я также могу использовать их ui.values[] для установки и отображения новых значений в других элементах div. Как я могу увидеть новые значение под дескриптором. То есть, если я переместил дескриптор на 100 долларов, я хочу установить текст «100 долларов» прямо под этим дескриптором."

Был ответ (http://jsfiddle.net/william/RSkpH/1/) , но у меня проблема с функцией "animate: "slow"" в ползунке. Помогите, как анимировать значения с помощью дескриптора. И мой слайдер оставляет мусор после перемещения :( http://data2.floomby.com/files/share/2_4_2013/6TZ1DOmbk2pRqvCF0nfVw.jpg

Спасибо

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: "slow",
    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<br>
        setTimeout(delay, 5);
    }
});

person Eugen Borunoff    schedule 02.04.2013    source источник
comment
В чем проблема с animate: "slow"?   -  person ohcibi    schedule 02.04.2013
comment
Значения остаются на тех же позициях при нажатии на ползунок, перемещаясь только при перемещении ручкой   -  person Eugen Borunoff    schedule 02.04.2013


Ответы (1)


Вы должны использовать обратный вызов change вместо обратного вызова slide. change запускается всякий раз, когда изменяется значение ползунка, что вам и нужно.

//...
change: function(event, ui) {
    var delay = function() {
    //...

Редактировать

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

Я считаю, что гораздо удобнее размещать метки внутри элементов ручки. Таким образом, они будут держаться ниже ручек сами по себе. См. эту скрипту: http://jsfiddle.net/ohcibi/RvSgj/2/

Обновлять

Последняя скрипка, похоже, не работает в Chromium для Linux, возникает странная ошибка gfx (см. комментарии к скриншоту). Тем не менее, Firefox 19.0.2, Opera 12.14 и последний Chrome для Windows работают нормально.

person ohcibi    schedule 02.04.2013
comment
Я уже пробовал это, не работает. Пожалуйста, можете ли вы показать демо? - person Eugen Borunoff; 02.04.2013
comment
может со мной что-то не так, но я вижу, что data2.floomby.com/files/ поделиться/2_4_2013/ - person Eugen Borunoff; 02.04.2013
comment
Это странно. Я только что попробовал это с firefox, оперой, и когда я делал это, я был на окнах, используя хром. Это происходит только на хроме для Linux oO. - person ohcibi; 02.04.2013
comment
У меня последняя версия Chrome для Windows. И мой слайдер оставляет мусор после перемещения :( data2.floomby.com/files/share /2_4_2013/ тоже только в Хроме, в Опере выглядит хорошо. - person Eugen Borunoff; 02.04.2013