Вступление #

Для кастомизация ползунка можно использовать класс .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') // Удалит все привязанные события.