Вступление #

Для кастомизация ползунка можно использовать класс .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 }
		}'
	/>

	// настройки noUiSlider(https://refreshless.com/nouislider/slider-options/)
	const options = {
		'connect': 'lower',
		'start': 50,
		'pips': {
			'mode': 'steps',
			'stepped': true,
			'density': 4,
		},
	};

    BasicRangeSlider.init('.my-range-slider', options);
    BasicRangeSlider.init(document.querySelector('.my-range-slider'), options);
    BasicRangeSlider.init(document.querySelectorAll('.my-range-slider'), options);

    // или

    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 }
		}'
	/>

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

	const myRangeSlider = document.querySelector(".my-range-slider");

	console.log(myRangeSlider.BasicRangeSlider); // пример экземпляра

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

Представляют собой оболочки для noUiSlider.on.

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

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

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