Вступление #

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

Методы #

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

get() #

Получить значение ползунка.

BasicRangeSlider.get('.my-range-slider')

set() #

Изменить значение ползунка.

BasicRangeSlider.set('.my-range-slider', 10)

/*
	Если имеется несколько ползунков,
	то для изменения их значений следует использовать массив.
*/
BasicRangeSlider.set('.my-range-slider', [10, 20])

setHandle() #

Изменить значение только одного ползунка.

BasicRangeSlider.setHandle('.my-range-slider', [2, 12, true, true])

где

• 2 — Индекс ползунка. Индексы всех ползунков начинаются с нуля;
• 12 — Новое значение ползунка;
• true — Вызвать событие set;
• true — Не игнорировать нажатие на слайдер.

reset() #

Возврат к первоначальным значениям ползунка.

BasicRangeSlider.reset('.my-range-slider')

getPositions() #

Получить текущее положение ползунков.

BasicRangeSlider.getPositions('.my-range-slider')

on() #

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

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

off() #

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

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

Экземпляр #

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

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

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

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

Можно прослушать события элемента и получить необходимые параметры.

rangeSlider:change #

Срабатывает при изменении значения поля-слайдера.

Параметры:

const myCustomSlider = document.querySelector('.my-custom-slider')

myFormValidation.addEventListener(
	'rangeSlider:change',
	function (event) {
		console.log(event.detail) // параметры
	},
	false,
)