Бібліотека jQuery UI. Віджет Slider

33

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми дізнаємося про віджеті Slider, який дозволяє реалізувати повзунок елемент керування), з допомогою якого можна зручно управляти вибором значень.

Штуку, яку дозволяє реалізувати віджет Slider бібліотеки jQuery UI, я думаю, ви не раз вже зустрічали. Особливо популярний слайдер в інтернет-магазинах при реалізації підбору товарів за ціною.

Наприклад, ми хочемо побачити всі товари в певному діапазоні цін. Для цього можна було б створити два поля, перше з яких користувач вводить стартову ціну, а по друге — максимальну ціну товару. Більш ефектний спосіб — використання повзунка, перетягуючи який ми змінюємо діапазон значень ціни.

Давайте почнемо з базової функціональності плагіна. Створимо порожньо блок div і викличемо для нього метод slider:

$(function(){
$(‘#slider’).slider();
});

Ось такий результат ми отримаємо:

Библиотека jQuery UI. Виджет Slider

Поки що не дуже корисно. Давайте трохи ускладнимо і реалізуємо озвучений вище приклад, тобто створимо повзунок вибору діапазону цін. Для цього нам буде потрібно кілька налаштувань, опис яких можна знайти в документації до плагіну slider.

Після нетривалого знайомства з документацією ви цілком можете накидати ось такий приклад:

Початкова ціна
Кінцева ціна

$(function(){
$(‘#slider’).slider({
range: true, // використовуємо діапазон
min: 0, // мінімальне значення
max: 1000, // максимальне значення
step: 10, // крок зміни значення
values: [50, 500], // початкові значення
slide: function(event, ui){ // callback функція при зміні діапазону
$(‘#start’).val(ui.values[0]);
$(‘#end’).val(ui.values[1]);
}
});
// записуємо стартові значення діапазону у відповідні поля
$(‘#start’).val($(‘#slider’).slider(‘values’, 0));
$(‘#end’).val($(‘#slider’).slider(‘values’, 1));
});

Весь код я ретельно прокоментував, так що проблем з розумінням коду бути не повинно. В результаті ми отримали ось такий симпатичний повзунок вибору діапазону цін:

Библиотека jQuery UI. Виджет Slider

Користувач тепер може вводити ціни вручну, так і просто перетягнути повзунок, що досить зручно. На цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!