Вступление #

Для кастомизация ползунка, можно использовать по умолчанию класс .js-range-slider.
Логика ползунка реализована на базе noUiSlider.

Установка #

Пример разметки и инициализации кастомизированного ползунка.

	<input
		class="js-range-slider"
		type="range"
		min="0"
		max="100"
		step="10"
		data-range-id="my-range"
		data-range-options='{
			"connect": "lower",
			"start": 50,
			"pips": { "mode": "steps", "stepped": true, "density": 4 }
		}'
	/>

    BasicRangeSlider.init('.my-range-slider');
    BasicRangeSlider.init(document.querySelector('.my-range-slider'));
    BasicRangeSlider.init(document.querySelectorAll('.my-range-slider'));
    BasicRangeSlider.init('.my-range-slider', {
		"connect": "lower",
		"start": 50,
		"pips": { "mode": "steps", "stepped": true, "density": 4 }
	});

    // или

    BasicRangeSlider.init(); // по умолчанию инициaлизирует элементы с классом .js-range-slider

Конфигурация #

Настройки, которые указываются при помощи специальных data-атрибутов.

data-range-options #

В значениях указываются параметры для гибкой настройки ползунка. С ними можно ознакомиться на странице офиц.документации.

	<input
		class="js-range-slider"
		type="range"
		data-range-options='{
			"connect": true,
			"start": [0, 80],
			"pips": { "mode": "steps", "stepped": true, "density": 4 }
		}'
	/>

data-range-id #

В значениях можно указать id для кастомизированного ползунка.

	<input
		class="js-range-slider"
		data-range-id="my-range"
	/>

min, max, step #

Стандартные параметры, которые указывается при помощи обычных атрибутов.

	<input
		class="js-range-slider"
		min="0"
		max="100"
		step="10"
		data-range-options='{
			"connect": true,
			"start": [0, 80],
			"pips": { "mode": "steps", "stepped": true, "density": 4 }
		}'
	/>

Прослушивание событий #

Прослушивания событий реализовано на базе noUiSlider.on.

	BasicRangeSlider.on('#custom-range-slider', {
		event: 'change',
		listener: (values, handle, unencoded, tap, positions, noUiSlider) => {
			console.log(values);
		}
	})

Чтобы удалить событие, можно воспользоваться методом BasicRangeSlider.off().

	BasicRangeSlider.off('#custom-range-slider', 'change');
	BasicRangeSlider.off('#custom-range-slider'); // удалит все привязанные события.