Про input[type=range], параметр multiple і як зробити, щоб все працювало

Звичайно, якщо вам потрібно зробити блок з повзунком або навіть що крутіше — з вибором діапазону, то використовуємо готовий плагін з набору jQuery UIslider().

image

На ПК все відмінно працює, ми навіть не переймаємося, міняємо стилі і радіємо функціоналом.
Затики приходить у тому моменті, коли проект — це мобільна версія чого-небудь на html і обов'язково замість поля для введення значень потрібно використовувати повзунок — ну тому що зручніше або ж з якихось інших причин.

Тут і виникає проблема. На windows phone 8 працює, на android 4.1 версії немає, та і iphone 4 теж відмовився нормально працювати.
Першим ділом знайшов, що є в мережі, це noUiSlider, причому досить добре працює і скрізь, але у мене тільки при першому скролінгу повзунка, потім все лагает, пердить і дригається. Довелося відмовитися, причину лагів не з'ясував, та й часу розбиратися не було.
egorkhmelev.github.io/jslider/ відразу відмовився працювати на мобільниках, jqxslider добре, але гальма.

Коротше суть посту: це взяти нативний слайдер:
<input type="range">

Додати йому параметр
multiple 

І зробити так, щоб з'явився вибір діапазону.
В документації щось миготить про цей параметр, але по суті ніде нічого не змінюється, якщо його додати.

За допомогою нехитрих маніпуляцій зі стилями і скриптами виходить щось на кшталт:


Ініціалізація
$('input[name=three]').nativeMultiple({
stylesheet: "slider",
onCreate: function() {
console.log(this);
},
onChange: function(first_value, second_value) {
console.log('onchange', [first_value, second_value]);
},
onSlide: function(first_value, second_value) {
console.log('onslide', [first_value, second_value]);
}
});

<input type="range" min="0" max="180" step="20" value="0,10" />


Установки плагіна
stylesheet — додатковий клас для слайдера.

Параметри елемента
min — мінімальне значення
max — максимальне значення
step — крок слайдера (за замовчуванням 1, цей пункт можна опустити)
value — початкове і кінцеве значення повзунків через кому. При відсутності коми початкове і кінцеве дорівнюють даним значенням. При відсутності значення початковий і кінцевий рівні мінімального і максимального значення відповідно.

Події
Подія onCreate виникає при ініціалізації слайдера.
Подія onSlide виникає при русі одного з повзунків.
Подія onChange виникає при завершенні руху одного з повзунків.

Додам, що ось ці чудові білі вертикальні дві смужки на повзунках працюють тільки в webkit движках. Можливо, спільне рішення — це додати background повзунка з вже намальованими смугами.

А ось як змінювати стилі повзунків — в інтернеті вже повно статей і даної публікації не стосується безпосередньо. Дерзайте!

Подивитися на приклад і завантажити плагін ви можете на цій сторінці: lampaa.github.io/nativemultiple/

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.