1. Установка
- подключаем библиотеку jQuery версии 1.7+
- подключаем библиотеку jQuery UI с виджетом Slider
- подключаем стиль jQuery UI с виджетом Slider
- подключаем плагин jQuery UI Touch Punch для корректной работы ползунков на тачпадах
- добавляем HTML для нашегно ползунка:
1<div id="polzunok"></div>
- и инициализируем скриптом с нужными настройками:
12345$( "#polzunok" ).slider({animate: "slow",range: "min",value: 50});
В итоге получим это:
2. Настройки
-
animate
Определяет, будет ли ползунок передвигаться плавно при клике на ползунке.
true или false, "fast" (быстро) или "slow" (медленно), или число в миллисекундах
По умолчанию: — false
-
classes
Добавляет дополнительные классы к классам слайдера. Может использоваться, если для разных ползунков используются разные стили.
По умолчанию:
12345{"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 )
Событие, которое происходит при изменении значения ползунка
123$( ".selector" ).slider({change: function( event, ui ) { ... }});или
1$( ".selector" ).on( "slidechange", function( event, ui ) { ... } ); -
create ( event, ui )
Событие, которое запускается при создании ползунка
123$( ".selector" ).slider({create: function( event, ui ) { ... }});или
1$( ".selector" ).on( "slidecreate", function( event, ui ) { ... } ); -
slide ( event, ui )
Событие, которое происходит на каждое движении мыши, при перетаскивании рукоятки ползунка. ui.value представляет текущее значение ползунка.
123$( ".selector" ).slider({slide: function( event, ui ) { ... }});или
1$( ".selector" ).on( "slide", function( event, ui ) { ... } ); -
start ( event, ui )
Событие, которое происходит, когда пользователь начинает перетаскивать рукоятку ползунка
123$( ".selector" ).slider({start: function( event, ui ) { ... }});или
1$( ".slidestart" ).on( "slide", function( event, ui ) { ... } ); -
stop ( event, ui )
Событие, которое происходит, когда пользователь заканчивает перетаскивать рукоятку ползунка
123$( ".selector" ).slider({stop: function( event, ui ) { ... }});или
1$( ".slidestart" ).on( "slidestop", function( event, ui ) { ... } );
Подробнее о настройках, методах и событиях jQuery UI Slider на сайте api.jqueryui.com
5. Вывод значений ползунка
Данный слайдер не имеет смысла, если пользователь не будет видеть данные, которые он им вводит. Для этого выведем на экран эти значения:
Значение ползунка:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
Для слайдера из 2-х рукояток:
Значение ползунка:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
6. Добавление значений к форме
Очень часто бывает, что данные такого слайдера нужно передать в форму, а не просто показывать на экране. Все делается аналогично выводу на экран, только данные подставляются в скрытое поле input
Значение ползунка:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
7. Оформление
Чтобы придать ползунку другой вид, нужно добавить свой стиль ниже оригинального jquery-ui.css (как в примере) или редактировать оригинальный
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.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) |
Как сделать, чтобы при вводе в input минимального и максимального значения изменялось положение ползунка? При этом, если ввести min > max, то они менялись местами
Про ввод с инпута тут есть: Варианты оформления jQuery UI Slider (5тый вариант)
Ну а чтобы местами менялось, это в проверки там нужно править
Есть в ползунка и их вывод, как их объединить в один вывод?
Есть 2* ползунка
А зачем их объединять в 1 вывод?
Если они полностью идентичны, можно привязать слайдер к классу, а не к айди.
Привет! Спасибо за статью! Работает во всех браузерах , кроме IE11. Это важно, так как задача стоит адаптировать сайт под все браузеры, и под IE11 в том числе (будь он неладен). Подскажи, плиз, как это сделать?
Да вроде как сладер этот поддерживается IE11, но проверить не могу, у меня его нет.
У вас неплохой сайт) Спасибо за информацию,как разработчик/чуток дизайнер могу выразить свою благодарность за внимание к мелочам(анимашки и переходы на js-сине) 🙂
Приветствую всех.
Помоги с решением моей микро задачи )))
Есть вертикальный слайдер, есть min и max — 0 и 100.
Задача, сделать чтобы ползунок никогда не доходит до своего минимума и максимума, а останавливался допустим на значениях 5 и 95 и на полосе прокрутки при максимальных и минимальных значения всегда оставались маленькие "хвостики"
Это реально сделать?
Если min стоит 0, то он и будет идти на 0, если нужно 5 минимальное, то нужно поставить 5. Соотв. и max тоже.
А чтобы хвостик оставался можно сделать псевдо шкалу, которую можно растянуть и оформить как угодно.
Псевдо шкала? А как её сделать? В двух словах ))
Шкала слайдера прозрачная, а под ней альтернативная, нужного размера и оформления.
Спасибо за идею, сделал ))
И тут же вопросик возник ), при адаптации только у меня не работает ползунок, двигать можно только нажатием на линию скроллинга?
Это на тачпадах? Для етого патч есть
Мне нужно, чтобы пользователь мог сам выставлять максимальное значение для ползунка. Подскажите, пожалуйста, как это осуществить.
А нужкн ли для такой задачи вообще ползунок?
Он как бы изначально же подразумевает значение ОТ и ДО
А у нас это значение не известно, оно может быть и 5 и 5 000 000.
Тут, как мне кажется, нужно просто сделать поле для ввода этого значения.
Пдскажите, как использовать несколько слайдеров на одной странице?
В таком варианте не работает
У вас во втором слайдере перепутаны значения max и min в его настройках
Статья весьма крутая! Мне нужна подсказка, как сделать один ползунок при передвижении которого меняется два разных значения?
Если я правильно понял, то второе значение должно по формуле ставится?
Вот пример:
https://atuin.ru/test/polz.html
Статья хорошая! Спасибо за старания.
Все круто работает! Спасибо!