Ползунок диапазонов jQuery UI Slider

Установка
Настройки
Методы
События

Вывод значений ползунка
Добавление значений к форме
Оформление
Описание классов

1. Установка

подключаем библиотеку jQuery версии 1.7+
подключаем библиотеку jQuery UI с виджетом Slider
подключаем стиль jQuery UI с виджетом Slider
подключаем плагин jQuery UI Touch Punch для корректной работы ползунков на тачпадах
добавляем HTML для нашегно ползунка:

<div id="polzunok"></div>

1

<div id="polzunok"></div>
и инициализируем скриптом с нужными настройками:

$( "#polzunok" ).slider({ animate: "slow", range: "min", value: 50 });

1
2
3
4
5

$( "#polzunok" ).slider({
    animate: "slow",
    range: "min",
    value: 50
});

В итоге получим это:

2. Настройки

animate

Определяет, будет ли ползунок передвигаться плавно при клике на ползунке.

true или false, "fast" (быстро) или "slow" (медленно), или число в миллисекундах

По умолчанию: — false
classes

Добавляет дополнительные классы к классам слайдера. Может использоваться, если для разных ползунков используются разные стили.

По умолчанию:

{ "ui-slider": "ui-corner-all", "ui-slider-handle": "ui-corner-all", "ui-slider-range": "ui-corner-all ui-widget-header" }

1
2
3
4
5

{
  "ui-slider": "ui-corner-all",
  "ui-slider-handle": "ui-corner-all",
  "ui-slider-range": "ui-corner-all ui-widget-header"
}

Описание классов слайдера

Подробнее об использовании классов на сайте learn.jquery.com
disabled

Отключает true или включает false слайдер.

По умолчанию: — false
max

Максимальное значение ползунка.

По умолчанию: — 100
min

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

По умолчанию: — 0
orientation

Горизонтальная "horizontal" или вертикальная "vertical" ориентация слайдера

По умолчанию: — "horizontal"
range

Определяет диапазон ползунка

Значение true включит второй ползунок и диапазон между ними, "min" - диапазон от минимума шкалы до ползунка, "max" - диапазон от ползунка до максимума шкалы

По умолчанию: — false
step

Шаг значений ползунка, который должен быть кратным разнице между максимальным и минимальным значением шкалы.

По умолчанию: — 1
value

Начальное значение ползунка, если он один

По умолчанию: — 0
values

Начальные значения ползунков, если их два, например [ 10, 20 ]

По умолчанию: — null

3. Методы

Вызов этих функций позволяет быстро влиять на работу ползунка и получать с него данные

$( ".selector" ).slider( "destroy" );

Полностью удаляет функциональность ползунка, что вернет элемент обратно в исходное состояние.
$( ".selector" ).slider( "disable" );

Отключает ползунок.
$( ".selector" ).slider( "enable" );

Возобновляет работу ползунка.
$( ".selector" ).slider( "option", { настройки } );

Устанавливает одну или несколько настроек
var option = $( ".selector" ).slider("option", "min");

Получает значение настройки
var option = $( ".selector" ).data().uiSlider.options;

Получает значения всех настроек, например: option.min, option.max и т.д.
$( ".selector" ).slider( "value", 20 );

Устанавливает нужное значение для рукоятки
var selection = $( ".selector" ).slider( "value" );

Получает значение рукоятки
$( ".selector" ).slider( "values", [ 55, 105 ] );

Устанавливает нужные значение для рукояток
$( ".selector" ).slider( "values", 0, 105 ] );

Устанавливает нужное значение для рукоятки 0
var values = $( ".selector" ).slider( "values" );

Получает значения рукояток

4. События

change ( event, ui )

Событие, которое происходит при изменении значения ползунка

$( ".selector" ).slider({ change: function( event, ui ) { ... } });

1
2
3

$( ".selector" ).slider({
change: function( event, ui ) { ... }
});

или

$( ".selector" ).on( "slidechange", function( event, ui ) { ... } );

1

$( ".selector" ).on( "slidechange", function( event, ui ) { ... } );
create ( event, ui )

Событие, которое запускается при создании ползунка

$( ".selector" ).slider({ create: function( event, ui ) { ... } });

1
2
3

$( ".selector" ).slider({
create: function( event, ui ) { ... }
});

или

$( ".selector" ).on( "slidecreate", function( event, ui ) { ... } );

1

$( ".selector" ).on( "slidecreate", function( event, ui ) { ... } );
slide ( event, ui )

Событие, которое происходит на каждое движении мыши, при перетаскивании рукоятки ползунка. ui.value представляет текущее значение ползунка.

$( ".selector" ).slider({ slide: function( event, ui ) { ... } });

1
2
3

$( ".selector" ).slider({
slide: function( event, ui ) { ... }
});

или

$( ".selector" ).on( "slide", function( event, ui ) { ... } );

1

$( ".selector" ).on( "slide", function( event, ui ) { ... } );
start ( event, ui )

Событие, которое происходит, когда пользователь начинает перетаскивать рукоятку ползунка

$( ".selector" ).slider({ start: function( event, ui ) { ... } });

1
2
3

$( ".selector" ).slider({
start: function( event, ui ) { ... }
});

или

$( ".slidestart" ).on( "slide", function( event, ui ) { ... } );

1

$( ".slidestart" ).on( "slide", function( event, ui ) { ... } );
stop ( event, ui )

Событие, которое происходит, когда пользователь заканчивает перетаскивать рукоятку ползунка

$( ".selector" ).slider({ stop: function( event, ui ) { ... } });

1
2
3

$( ".selector" ).slider({
stop: function( event, ui ) { ... }
});

или

$( ".slidestart" ).on( "slidestop", function( event, ui ) { ... } );

1

$( ".slidestart" ).on( "slidestop", function( event, ui ) { ... } );

Подробнее о настройках, методах и событиях jQuery UI Slider на сайте api.jqueryui.com

5. Вывод значений ползунка

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

Значение ползунка:

<div id="polzunok"></div>
<b>Значение ползунка: <span style="color:green" id="result-polzunok"></span></b>
<script type="text/javascript">
	$("#polzunok").slider({
		animate: "slow",
		range: "min",	
		value: 50,
		slide : function(event, ui) {	
			$("#result-polzunok").text(ui.value);		
		}
	});
	$( "#result-polzunok" ).text($( "#polzunok" ).slider( "value" ));	
</script>

<b>Значение ползунка: <span style="color:green" id="result-polzunok"></span></b>

$("#polzunok").slider({

animate: "slow",

range: "min",

value: 50,

slide : function(event, ui) {

$("#result-polzunok").text(ui.value);

}

});

$( "#result-polzunok" ).text($( "#polzunok" ).slider( "value" ));

</script>

Для слайдера из 2-х рукояток:

Значение ползунка:

<div id="polzunok"></div>
<b>Значение ползунка: <span style="color:green" id="result-polzunok"></span></b>
<script>
	$("#polzunok").slider({
		animate: "slow",
		range: true,	
		values: [ 10, 65 ],
		slide : function(event, ui) {	
			$("#result-polzunok").text( "от " + ui.values[ 0 ] + " до " + ui.values[ 1 ] );		
		}
	});
	$( "#result-polzunok" ).text("от " + $("#polzunok").slider("values", 0) + " до " + $("#polzunok").slider("values", 1));
</script>

<b>Значение ползунка: <span style="color:green" id="result-polzunok"></span></b>

$("#polzunok").slider({

animate: "slow",

range: true,

values: [ 10, 65 ],

slide : function(event, ui) {

$("#result-polzunok").text( "от " + ui.values[ 0 ] + " до " + ui.values[ 1 ] );

}

});

$( "#result-polzunok" ).text("от " + $("#polzunok").slider("values", 0) + " до " + $("#polzunok").slider("values", 1));

</script>

6. Добавление значений к форме

Очень часто бывает, что данные такого слайдера нужно передать в форму, а не просто показывать на экране. Все делается аналогично выводу на экран, только данные подставляются в скрытое поле input

Значение ползунка:

<div id="polzunok"></div>
<b>Значение ползунка: <span style="color:green" id="result-polzunok"></span></b>
<form action="/send.php" method="post">
	<input type="hidden" name="send-result-polzunok" id="send-result-polzunok" />
	<input type="submit" value="Отправить значение ползунка" />
</form>
<script>
	$("#polzunok").slider({
		animate: "slow",
		range: "min",	
		value: 50,
		slide : function(event, ui) {	
			$("#result-polzunok").text(ui.value);		
			$("#send-result-polzunok").val(ui.value);	
		}
	});
	$("#result-polzunok").text($("#polzunok").slider("value"));	
	$("#send-result-polzunok").val($("#polzunok").slider("value"));	
</script>

<b>Значение ползунка: <span style="color:green" id="result-polzunok"></span></b>

</form>

$("#polzunok").slider({

animate: "slow",

range: "min",

value: 50,

slide : function(event, ui) {

$("#result-polzunok").text(ui.value);

$("#send-result-polzunok").val(ui.value);

}

});

$("#result-polzunok").text($("#polzunok").slider("value"));

$("#send-result-polzunok").val($("#polzunok").slider("value"));

</script>

7. Оформление

Чтобы придать ползунку другой вид, нужно добавить свой стиль ниже оригинального jquery-ui.css (как в примере) или редактировать оригинальный

.ui-slider.ui-slider-horizontal {
	background: #BFE2FF;
	height:12px;
	border:none;
}
.ui-slider .ui-slider-handle {
	width: 0; 
	height: 0;
	border-top: 18px solid transparent;
	border-left: 36px solid #337AB7;
	border-bottom: 18px solid transparent;
	border-right: none;
	top:-12px;
	margin-left:-18px;
	cursor:pointer;
	background: transparent;
}
.ui-slider .ui-slider-range {
	background: #337AB7;
	height:12px;
}

.ui-slider.ui-slider-horizontal {

background: #BFE2FF;

height:12px;

border:none;

}

.ui-slider .ui-slider-handle {

width: 0;

height: 0;

border-top: 18px solid transparent;

border-left: 36px solid #337AB7;

border-bottom: 18px solid transparent;

border-right: none;

top:-12px;

margin-left:-18px;

cursor:pointer;

background: transparent;

}

.ui-slider .ui-slider-range {

background: #337AB7;

height:12px;

}

Другие способы оформления можно поглядеть в отдельной статье: Варианты оформления jQuery UI Slider

8. Описание классов

Ниже представлена таблица с классами слайдера и за что отвечает каждый из них

Класс	Описание
.ui-slider	дорожка слайдера
.ui-slider-horizontal	стили для горизонтального слайдера
.ui-slider-vertical	стили для вертикального слайдера
.ui-slider-handle	стили для рукоятки
.ui-slider-range	стили для выбранного диапазона
.ui-slider-range-min	стили для выбранного диапазона с настройкой range: "min"
.ui-slider-range-max	стили для выбранного диапазона с настройкой range: "max"
.ui-state-disabled	стили для заблокированного слайдера (disabled: true)

<div id="polzunok"></div>
Значение ползунка: <span style="color:green;" id="result-polzunok"></span><br>
Значение ползунка умноженное на 2: <span style="color:green;" id="result-polzunok2"></span>
<script type="text/javascript">
    $("#polzunok").slider({
        animate: "slow",
        range: "min",    
        value: 50,
        slide : function(event, ui) {    
		$("#result-polzunok").text(ui.value);   
		$("#result-polzunok2").text(ui.value * 2);    
        }
    });
	$( "#result-polzunok" ).text($( "#polzunok" ).slider( "value" ));    
	$( "#result-polzunok2" ).text($( "#polzunok" ).slider( "value" ) * 2); 
</script>

Вот пример:
https://atuin.ru/test/polz.html

Игорь: 26.12.2018 в 18:13

Статья хорошая! Спасибо за старания.

Ответить
Роман: 06.09.2018 в 12:05

Все круто работает! Спасибо!

Ответить

1. Установка

2. Настройки

animate

classes

disabled

max

min

orientation

range

step

value

values

3. Методы

$( ".selector" ).slider( "destroy" );

$( ".selector" ).slider( "disable" );

$( ".selector" ).slider( "enable" );

$( ".selector" ).slider( "option", { настройки } );

var option = $( ".selector" ).slider("option", "min");

var option = $( ".selector" ).data().uiSlider.options;

$( ".selector" ).slider( "value", 20 );

var selection = $( ".selector" ).slider( "value" );

$( ".selector" ).slider( "values", [ 55, 105 ] );

$( ".selector" ).slider( "values", 0, 105 ] );

var values = $( ".selector" ).slider( "values" );

4. События

change ( event, ui )

create ( event, ui )

slide ( event, ui )

start ( event, ui )

stop ( event, ui )

5. Вывод значений ползунка

6. Добавление значений к форме

7. Оформление

8. Описание классов

Смотрите также:

Наклонная галерея

Горизонтальный таймлайн

Варианты оформления jQuery UI Slider

Добавить комментарий:

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

Разделы:

Проверенный хостинг: