О input[type=range], параметре multiple и как сделать, чтобы всё работало

Обычно, если вам требуется сделать блок с ползунком или даже что покруче — с выбором диапазона, то используем готовый плагин из набора jQuery UI — slider().

На ПК всё отлично работает, мы даже не заморачиваемся, меняем стили и радуемся функционалом.
Затык приходит в том моменте, когда проект — это мобильная версия чего-либо на 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/

Автор: lampa

Источник