1

Подскажите пожалуйста, как в jQuery UI Slider получить направление (увеличение или уменьшение) смещения ползунка. В зависимости от направления, например, изменять размер блока.

To_wave
  • 141

1 Answers1

1

Используем событие slide (исполняется при каждом перемещении слайдера) и сравниваем предыдущее значение слайдера с текущим. В комментариях есть подробное объяснение. Спасибо @Qwertiy за помощь.

HTML:

<div id="slider"></div>
<p id="result"></p>

JS:

$( "#slider" ).slider({
    slide: function(ev,ui) {
            var prev = $(this).slider('value'),
                curr = ui.value;

            if(prev < curr) {
                $('#result').html('&uarr;');  
            } else {
                $('#result').html('&darr;');  
            }
        }

});

https://jsfiddle.net/ytjbnary/

Sergey Snegirev
  • 1,674
  • Это действительно то что требуется? Он определяет направление перемещения безотносительно выбранного значения, что мне кажется неверным. Если брать текущее значение слайдера и не химичить с сохранением из slide, то будет именно относительно выбранного значения. – Qwertiy Apr 20 '15 at 08:54
  • Хм.. Я не прав, текущее значение слайдара содержит как раз предыдущее значение. var prev = $(this).slider('value'), cur = ui.value; - работает так же, как твой вариант, только без лишних сохранений. https://jsfiddle.net/s36u0kub/2/ – Qwertiy Apr 20 '15 at 09:14
  • Да, видимо, события выстреливаются так: start -> slide (тут мы сравниваем значения) -> stop (тут устанавливается новый value), поэтому можно и так. – Sergey Snegirev Apr 20 '15 at 09:17
  • Отметь как "ответ". – Sergey Snegirev Apr 20 '15 at 09:18
  • Как отметить как ответ? – Qwertiy Apr 20 '15 at 10:33
  • Рядом с голосовалкой за ответ (вверх-вниз) должна быть галочка. Нажать, станет зеленой, другие сразу увидят, что этот ответ работает, я получу сколько-то там в карму. – Sergey Snegirev Apr 20 '15 at 11:37
  • Убери data-аттрибут (с которым ты ещё и через attr работаешь вместо data) - тогда да. А так мне ответ не нравится, хотя да, он работает. Но вообще, есть подозрение, что спрашивающий ожидает другого поведения - когда точкой отсчёта является подтверждённое значение, а не предыдущее значение на слайдере. – Qwertiy Apr 20 '15 at 13:18
  • А, так это не твой вопрос. Я не заметил. Понятно, почему ты "ответом" не можешь пометить :) Про data - согласен. Хотя $elem.data(attr, value) работает МЕДЛЕННЕЕ, чем $elem.attr(attr,value), что забавно. А вот $.data(elem, attr, value) работает буквально на порядок быстрее.

    Сейчас код оптимизирую.

     – Sergey Snegirev Apr 22 '15 at 07:51
  • Держи плюсик :) Про data - возможно, оно медленнее attr потому что jQuery связывает свой кэш с элементом, т. е. хранить можно любой объект, а не только строку. А attr просто мапится на атрибуты. – Qwertiy Apr 22 '15 at 16:48