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

Плагин 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)

Опубликовано: 02.05.2018 / Обновлено: 22.06.2021
Рубрики: Слайдеры и карусели, Формы
Метки: jQuery, jQuery UI
64204 просмотра

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

Радиокнопки — карточки

Оформление переключателей radio в виде карточек для тарифов или другой информации

Плавное переключение радиокнопок

Плавное перемещение подсветки активной радиокнопки

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

Несколько вариантов оформления и добавление различных функций к ползунку диапазонов jQuery UI Slider

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

Ваш комментарий отправлен!

Роман: 16.12.2022 в 16:35

Здравствуйте! Не увидел решения двух проблем:
1) В 5-ом примере при вводе в инпут вручную, шкала меняется только при выходе из фокуса инпута, а как сделать так, чтобы при вводе сразу работало? Только так, чтобы не каждую цифру отдельно отсылало, а когда закончил вводить, например: вводим: 1 - отослало, вводим: 22 - отсылает отдельно сначало 2, потом еще 2, а надо сразу 22. Пробовал так:
$(".filter-price input").change(function() {
....
});
Не работает...
2) На мобильных экранах ползунок не передвигается путем перетаскивания, только клик по линии работает на корой ползунок находится. Как эта проблема решается?

Ответить
Андрей: 01.12.2022 в 10:06

Здравствуйте. Клонирую ползунки и при перемещении любого ползунка значение меняется во всех, а нужно чтоб значение было у каждого свое.
$(function () {
$(".slid").click(function () {
$("#slider").clone(true).appendTo(".wrapper").slider({
min: 0,
max: 365,
value: 1,
slide: function (event, ui) {
$(".ui-slider-handle").text(ui.value)
}
});
});
});

Ответить
- Alexander: 01.12.2022 в 11:34
  
  Клонировать нужно с разным ID
  Пример
  
  Ответить
Валерия: 31.10.2022 в 21:43

Здравствуйте, подскажите, пожалуйста, почему ползунок может быть некликабельный. Подключила все, как первом пункте установка, но ползунки не реагируют на клик.

Ответить
- Alexander: 01.11.2022 в 11:59
  
  Скорее всего ошибка в верстке, т.е. сам ползунок перекрывается каким то слоем.
  Но чтобы точно найти причину, нужно видеть результат.
  
  Ответить
Виктор: 18.01.2022 в 14:42

Александр. Добрый день. Есть ползунок с параметрами min: 1,max: 12. Подскажите пож-та как прописать в ползунке такую функцию что бы данные бегунка выводились в input таким образом: значение 1=8000, 2=8000, 3=8000, 4=9000, 5=11000, 6=12000, 7=13000, 8=14000, 9=16000, 10=18000, 11=20000, 12=20000. Я никак не могу понять как это сделать . Очень нужно понять этот алгоритм! Если не сложно то киньте пример на https://codepen.io . Спасибо вам большое заранее).

Ответить
- Alexander: 18.01.2022 в 15:35
  Я тут закономерности никакй не увидел, руками только подставлять значения значения.
  
  <div class="slider"></div> <input value="12000" type="hidden" id="newval" />
  
  Тут value - значение по умолчанию, на котором стоит ползунок.
  И скрипт:
  
  let newval; $(".slider").slider({ animate: "slow", range: "min", value: 5, min: 1, max: 12, change: function( event, ui ) { if (ui.value == 1) {newval = 8000} if (ui.value == 2) {newval = 8000} /* еще значения */ if (ui.value == 12) {newval = 20000} $("#newval").val(newval); } });
  Ответить
  - Виктор: 18.01.2022 в 16:48
    
    Я вам премного благодарен за помощь ! Всё получилось идеально ! Спасибо огромное !
    
    Ответить
Олег: 16.01.2022 в 16:15

Подскажите как один ползунок заставить двигаться другой ползунок синхронно ( в ползунках значения разные ) ?

Ответить
- Alexander: 16.01.2022 в 17:41
  
  Через события и методы, например, когда у нас двигается ползунок, происходит событие slide , через ui.value получаем его значение.
  Далее обрабатываем это значение как нам нужно и передаем в другой ползунок
  $( ".selector" ).slider( "value",значение );
  
  Ответить
  - Олег: 16.01.2022 в 18:35
    
    Александр , я в JS только начинающий ( . Напишите какой код можно использовать для этого . Идентификаторы бегунков #jQuerySlider1 и #jQuerySlider2
    
    Ответить
    - Олег: 16.01.2022 в 18:53
      
      Мне значения менять не нужно в ползунках , нужно просто когда я передвигаю первый за ним передвигался и второй.
      
      Ответить
      - Alexander: 16.01.2022 в 19:03
        
        https://codepen.io/atuin/pen/ExwMxpX
        Если значение одинаковые, то соотв. ставим одинаковые значения и убираем деление/умножение.
        
        Ответить
        
        Олег: 17.01.2022 в 00:27
        
        Спасибо вам огромное ! Всё получилось ! И последний маленький вопрос . Как отобразить в подсказке над handle свои значения , а не значения бегунка. Данные для подсказки нужны такие min:13, max:24. Данные в slider min:1, max:12
        
        Ответить
        
        Alexander: 17.01.2022 в 07:19
        
        Как в пункте 5 -Вывод значения ползунка, только прибавьте к выводимому значению 12
        
        Олег: 17.01.2022 в 10:11
        
        Александр , спасибо вам большое ещё раз ! С вашей помощью начал потихоньку разбираться и вникать в суть вопроса )))
Александр: 13.11.2021 в 14:42

Итого на вашем сайте ради 1 ползунка будет подключена 2 библиотеки и 1 плагин.
А еще столько же будет на слайдере, модальных окнах и других элементах.
Это к вопросу о быстродействии сайтов

Ответить
Михаил: 22.04.2021 в 10:43

Как сделать чтобы ползунок с диапазоном увеличивался логарифмически или разделить на 2 части и более (например): в 1 части значения 10 - 1000 и шаг 10, во 2 части 1000 - 100 000 шаг 1000?

Ответить
- Alexander: 22.04.2021 в 19:20
  
  Сделать 2 ползунка 🙂
  Или пробывать через события, что если значение больше 1000, то меняем шаг.
  
  Ответить
  - Михаил: 23.04.2021 в 11:02
    
    Спасибо за ответ. В итоге noUiSlider все решает 😉
    
    Ответить
Иван: 25.03.2021 в 15:47

Как сделать, чтобы при вводе в input минимального и максимального значения изменялось положение ползунка? При этом, если ввести min > max, то они менялись местами

Ответить
- Alexander: 27.03.2021 в 09:45
  
  Про ввод с инпута тут есть: Варианты оформления jQuery UI Slider (5тый вариант)
  Ну а чтобы местами менялось, это в проверки там нужно править
  
  Ответить
Max: 10.03.2021 в 01:55

Есть в ползунка и их вывод, как их объединить в один вывод?

Ответить
- Max: 10.03.2021 в 01:56
  
  Есть 2* ползунка
  
  Ответить
- Alexander: 10.03.2021 в 06:37
  
  А зачем их объединять в 1 вывод?
  Если они полностью идентичны, можно привязать слайдер к классу, а не к айди.
  
  Ответить
Женя: 12.02.2021 в 11:38

Привет! Спасибо за статью! Работает во всех браузерах , кроме IE11. Это важно, так как задача стоит адаптировать сайт под все браузеры, и под IE11 в том числе (будь он неладен). Подскажи, плиз, как это сделать?

Ответить
- Alexander: 12.02.2021 в 13:41
  
  Да вроде как сладер этот поддерживается IE11, но проверить не могу, у меня его нет.
  
  Ответить
Екатерина: 22.12.2020 в 16:04

У вас неплохой сайт) Спасибо за информацию,как разработчик/чуток дизайнер могу выразить свою благодарность за внимание к мелочам(анимашки и переходы на js-сине) 🙂

Ответить
Юрий: 02.12.2020 в 21:14

Приветствую всех.
Помоги с решением моей микро задачи )))
Есть вертикальный слайдер, есть min и max - 0 и 100.
Задача, сделать чтобы ползунок никогда не доходит до своего минимума и максимума, а останавливался допустим на значениях 5 и 95 и на полосе прокрутки при максимальных и минимальных значения всегда оставались маленькие "хвостики"
Это реально сделать?

Ответить
- Alexander: 03.12.2020 в 07:30
  
  Если min стоит 0, то он и будет идти на 0, если нужно 5 минимальное, то нужно поставить 5. Соотв. и max тоже.
  А чтобы хвостик оставался можно сделать псевдо шкалу, которую можно растянуть и оформить как угодно.
  
  Ответить
  - Юрий: 03.12.2020 в 19:28
    
    Псевдо шкала? А как её сделать? В двух словах ))
    
    Ответить
    - Alexander: 05.12.2020 в 08:32
      
      Шкала слайдера прозрачная, а под ней альтернативная, нужного размера и оформления.
      
      Ответить
      - Юрий: 10.12.2020 в 21:56
        
        Спасибо за идею, сделал ))
        И тут же вопросик возник ), при адаптации только у меня не работает ползунок, двигать можно только нажатием на линию скроллинга?
        
        Ответить
        
        Alexander: 11.12.2020 в 10:55
        
        при адаптации
        
        Это на тачпадах? Для етого патч есть
        
        Ответить
Андрей: 01.04.2020 в 23:33

Мне нужно, чтобы пользователь мог сам выставлять максимальное значение для ползунка. Подскажите, пожалуйста, как это осуществить.

Ответить
- Alexander: 03.04.2020 в 08:38
  
  А нужкн ли для такой задачи вообще ползунок?
  Он как бы изначально же подразумевает значение ОТ и ДО
  А у нас это значение не известно, оно может быть и 5 и 5 000 000.
  Тут, как мне кажется, нужно просто сделать поле для ввода этого значения.
  
  Ответить

Антон: 26.02.2020 в 19:28

Пдскажите, как использовать несколько слайдеров на одной странице?
В таком варианте не работает

    $("#age").slider({
        animate: "slow",
        range: true,    
        values: [ 18, 30 ],
		max: 30,
		min: 18,
        slide : function(event, ui) {    
            $("#result-age").text( "from " + ui.values[ 0 ] + " to " + ui.values[ 1 ] );        
        }
    });
    $( "#result-age" ).text("from " + $("#age").slider("values", 0) + " to " + $("#age").slider("values", 1));

	$("#height").slider({
        animate: "slow",
        range: true,    
        values: [ 150, 200 ],
		max: 150,
		min: 200,
        slide : function(event, ui) {    
            $("#result-height").text( "from " + ui.values[ 0 ] + " to " + ui.values[ 1 ] );        
        }
    });
    $( "#result-height" ).text("from " + $("#height").slider("values", 0) + " to " + $("#height").slider("values", 1));

Ответить

Alexander: 27.02.2020 в 08:18

У вас во втором слайдере перепутаны значения max и min в его настройках

Ответить

Aleksandr: 17.08.2019 в 10:42

Статья весьма крутая! Мне нужна подсказка, как сделать один ползунок при передвижении которого меняется два разных значения?

Ответить

Alexander: 18.08.2019 в 13:03

Если я правильно понял, то второе значение должно по формуле ставится?

<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

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

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