JQuery ui slider — диапазон — как узнать: левая или правая граница изменена?

Question

[kuzubov]

Есть табличка. В табличке куча слайдеров jQuery ui slider в режиме диапзона.

Тоесть у всех слайдеров есть 2 значения от и до которого они рисуют мне диапазон.



Задача каждого слайдера:

1. Если схватили мышкой за левую часть — то смещать и правую. Тоесть держать диапазон и смещать одновременно обе границы

2. Если схватили правую часть диапазона — то изменять диапазон и запомнить его чтобы потом держать новое значение в п.1



Таких слайдеров будет скажем 60 штук в таблице — это график выполнения работ. Тоесть мы двигаем диапазоны (время исполнения) по датам начала когда работа должна стартануть…



Сделал скрипт который запускает кучу слайдеров и индивидуально каждому из них по п.1 делает все что надо. Для запоминания ширины диапазона использую параметры из html определения самого слайдера:

Параметр len читается скриптом и если диапазон меняем — то в него прописывает назад новое значение… Казалось бы все хорошо… Но вот для реализации п.2 из условия надо понимать на левый или правый участок диапазона мы нажали и обрабатывать соотвественно разные события… Именно это и не могу пока найти — как узнать в этом слайдере за левую или правую часть диапазона мы его схватили…



Был бы всего 1 слайдер я бы просто завел переменные и в них держал последние значения слайдера, а потом при возникновении события просто сравнением какая изменилась определял… Тут же все сложнее — либо надо в html вводить еще два параметра мин и макс либо массив делать и заполнять его — в любов случае это геморой… Да и вообще по запомненым числам определять что изменилось мне кажется как то не комильфо.



Есть способ узнать левую или правую границу диапазона я потянул мышкой в jQuery ui slider?

Answer 1

[Anton Bobylev]

$('.r-slider').slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                console.log($(event.srcElement).index());
                // 1 - left
                // 2 - right
            }
        });

jsfiddle.net/6dp7W/25/

Comments

[kuzubov]

У меня в консоли выводится в обоих случаях 0 на дергание как левого так и правого элемента…

[Anton Bobylev]

Да, прошу прощения, видимо это работает только в хроме. Попробуйте тогда так:

$('.r-slider').slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                //console.log(ui);
if(ui.value == ui.values[0]) console.log('left');                    
if(ui.value == ui.values[1]) console.log('right');
            }
        });

[kuzubov]

Вообще я работаю в хроме и у меня не работало… Второй вариант пашет нормально, хотя выглядит скорее как лайфхак мне кажется ) но главное что работает…

[Anton Bobylev]

Если нет декларированного способа приходится анализировать объекты участвующие в событии и находить закономерности.

[kuzubov]

Понятненько… Ну все равно спасибо, все работает как надо )