jQuery UI Slider

11.12.2020
19861
1 комментарий

jQuery UI Slider – гибкий плагин, который позволяет создать элементы интерфейса в виде ползунков в различных вариантах.

Описание свойств и методов https://api.jqueryui.com/slider/

1

Для создания слайдера достаточно добавить пустой элемент <div id="slider"></div> и вызвать метод $('#slider').slider({...}), в нём прописать необходимые настройки, например минимальное и максимальное значение:

<div id="slider"></div>
<input type="text" id="val" value="">

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	$('#slider').slider({
		min: 0,
		max: 100,
		value: 0,
		slide: function(event, ui){
			$('#val').val(ui.value);
		}
	});
});
</script>
HTML

Результат:

Параметр range: 'min' – выводит заполнение от минимума.

<div id="slider"></div>
<input type="text" id="val" value="">

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	$('#slider').slider({
		 range: 'min',
		 min: 0,
		 max: 100,
		 value: 50,
		 slide: function(event, ui){
			$('#val').val(ui.value);
		}
	});
});
</script>
HTML

Результат:

Параметр range: 'max' – выводит заполнение от максимума.

<div id="slider"></div>
<input type="text" id="val" value="">

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	$('#slider').slider({
		 range: 'max',
		 min: 0,
		 max: 100,
		 value: 50,
		 slide: function(event, ui){
			$('#val').val(ui.value);
		}
	});
});
</script>
HTML

Результат:

<div id="slider"></div>
<input type="button" id="button" value="Получить значение">   

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	$("#slider").slider({
		min: 0,
		max: 100,
		value: 0
	});

	$('#button').click(function(){
		alert('Текущее значение: ' + $("#slider").slider("value"));
	}); 
});
</script>
HTML

Результат:

<div id="slider"></div>
	
<input type="text" id="val" placeholder="от 0 до 100">
<input type="button" id="button" value="Установить значение">

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	$("#slider").slider({
		min: 0,
		max: 100,
		value: 0
	});
	
	$('#button').click(function(){
		$("#slider").slider({'value': $('#val').val()});
	}); 
});
</script>
HTML

Результат:

2

Виджет позволяет вывести выбранное значение в ползунке с помощью методов create и slide.

<div id="slider">
	<div id="custom-handle" class="ui-slider-handle"></div>
</div>

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	var handle = $("#custom-handle");
	$("#slider").slider({
		create: function() {
			handle.text($(this).slider("value"));
		},
		slide: function(event, ui) {
			handle.text( ui.value );
		}
	});
});
</script>
HTML

CSS:

#custom-handle {
	width: 44px;
	height: 24px;
	top: 50%;
	margin-top: -14px;
	text-align: center;
	line-height: 24px;
	outline: none;
}
CSS

Результат:

3

Параметр step: 10 – задает шаг выбора.

<div id="slider"></div>
<input type="text" id="val" value="">

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	$('#slider').slider({
		 min: 0,
		 max: 100,
		 value: 50,
		 step: 10,
		 slide: function(event, ui){
			$('#val').val(ui.value);
		}
	});
});
</script>
HTML

Результат:

В некоторых случаях требуется сделать слайдер с определенным списком значений, например список с геометрической прогрессией.

<div id="slider"></div>
<input type="text" id="val" value="">

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	var prices = [2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192];
   
	$('#slider').slider({
		min: 0,
		max: prices.length - 1, 
		slide: function(event, ui){
			  $('#val').val(prices[ui.value]); 
		}
	});
});
</script>
HTML

Результат:

4

Пример адаптивной вёрстки шкалы в виде линейки для UI Slider:

<div id="slider"></div>

<div class="slider-scale" style="counter-reset: section -1;">
	<div class="slider-scale-tick slider-scale-big" data-label="0"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick slider-scale-big" data-label="25"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick"></div>
	<div class="slider-scale-tick slider-scale-big" data-label="50"></div>
</div>

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
$(function(){
	$('#slider').slider({
		min: 0,
		max: 50,
		value: 0
	});
});
</script>
HTML

CSS:

.slider-scale {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	height: 80px;
	position: relative;
}
.slider-scale-tick {
	position: relative;
}
.slider-scale-tick:before {
	content: "";
	border-left: 1px solid #677680;
	display: block;
	position: absolute;
	height: 5px;
}
.slider-scale-big:before {
	height: 10px;
}
.slider-scale-tick:after {
	top: 10px;
	counter-increment: section;
	content: attr(data-label);
	transform: translateX(-50%);
	text-align: center;
	position: absolute;
}
CSS

Результат:

5

Пример верстки фильтра для поиска товаров по цене:

<div id="slider"></div>

<div id="slider-range">
	<input type="text" id="min" value="1000">
	<input type="text" id="max" value="9000">
</div>

<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jqueryui/1.12.1/jquery-ui.min.css">

<script>
 $(function(){
	$('#slider').slider({
		range: true,
		min: 0,
		max: 9999,
		values: ['1000', '9000'],
		slide: function(event, ui) {
			$('#min').val(ui.values[0]);
			$('#max').val(ui.values[1]);
		}
	});
});
</script>
HTML

Результат:

11.12.2020, обновлено 03.12.2021
19861
#jQuery UI #Интерфейсы #Формы
Предыдущая запись Перевод текста в транслит на JavaScript
Следующая запись Выделение активных пунктов меню с помощью JQuery

Комментарии 1

, чтобы добавить комментарий.

Другие публикации

jQuery UI – многоуровневый аккордеон с сортировкой
jQuery UI – многоуровневый аккордеон с сортировкой
Пример как сделать многоуровневый аккордеон и добавить возможность перетаскивать элементы с помощью плагина jQuery UI...
7496
+4
Ссылка в заголовке UI Accordion
Ссылка в заголовке UI Accordion
Итак, есть аккордеон, все вкладки закрыты, если в заголовок вставить ссылку на другую страницу, то она по своему...
3803
0
Календарь jQuery UI Datepicker
Календарь jQuery UI Datepicker
DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.
81221
+6
Слайдеры изображений на плагине bxSlider
Слайдеры изображений на плагине bxSlider
BxSlider отличный jquery плагин слайдеров и каруселей, адаптивный, легко настраивается, поддерживает любой тип...
20773
-1
Работа с JSON в PHP
Работа с JSON в PHP
JSON (JavaScript Object Notation) – текстовый формат обмена данными, основанный на JavaScript, который представляет собой набор пар {ключ: значение}. Значение может быть массивом, числом, строкой и...
122069
+15
Пример парсинга html-страницы на phpQuery
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
67045
+27