Виджеты jQuery UI — это фреймворк различных решений для интерфейсов, полей и блоков. Разберем некоторые компоненты данного фреймворка. Можно собрать необходимые компоненты, а не весь комплекс.

Для работы виджетов нужно подключить базовые скрипт и стиль:

https://code.jquery.com/ui/1.12.1/jquery-ui.min.js
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css

Slider

Приведу пример настройки диапазонного слайдера, т.е. с двумя точками управления, с двумя полями для ввода значений. Между слайдером и полями настроена двусторонняя связь. Верстка:

<div id="slider"></div>
<input type="number" id="rangeMin" min="2000" step="100">
<input type="number" id="rangeMax" max="3500" step="100">

Инициализация и настройки слайдера:

$('#slider').slider({
	min: 2000,
	max: 3500,
	values: [2200, 3200],
	step: 100,
	range: true,
	create: setInputsFrom2Slider,
	slide: setInputsFrom2Slider,
	stop: setInputsFrom2Slider
});

function setInputsFrom2Slider() {
	$('#rangeMin').val($('#slider').slider("values", 0));
	$('#rangeMax').val($('#slider').slider("values", 1));
}

$('input').change(function(e) {
	switch (this.id) {
		case "rangeMin":
		case "rangeMax":
			var index = (this.id == "rangeMax") ? 1 : 0;
			$('#slider').slider("values", index, $(this).val())
			break;
	}
});

Чтобы слайдер корректно работал и в мобильной версии необходимо подключить дополнительный скрипт:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Поделиться в соц. сетях: