nativeMultiple

nativeMultiple

Плагин для расширения нативного слайдера <input type='range'>

Инициализация

$('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 возникает при завершении движения одного из ползунков.

Структура созданного слайдера

<div class="slider nativeMultiple">
    <div style="width: 131.444px;" class="nativeMultiple-one">
        <div style="width: 398px;">
            <input min="0" max="180" value="0,70" name="three" type="range" />
        </div>
    </div>
    <div class="nativeMultiple-two">
        <div style="width: 398px;">
            <input min="0" max="180" value="0,70" type="range" />
        </div>
    </div>
</div>

Пример