jQuery повзунок вибору діапазону

25

Від автора: вітаю вас, друзі. У цій невеликій статті ми спробуємо з вами реалізувати повзунок вибору діапазону на jQuery. Це може бути діапазон чого завгодно, як правило, така штука часто використовується в інтернет-магазинах при пошуку і фільтрації товарів. Приступимо.

Вихідні файли поточної статті ви можете завантажити за посиланням.

Отже, у нас є просте текстове поле форми, в яке, як ми припускаємо, користувач повинен ввести мінімальну та максимальну ціну, тобто певний діапазон цін, в якому він підшукує товар.

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

Такий повзунок нам допоможе реалізувати бібліотека jQuery UI. Скачаємо і підключимо цю бібліотеку. Якщо ви не знаєте, як це зробити, тоді пропоную звернутися до статті jQuery UI календар.

Власне, нам необхідно підключити файл стилів і скриптів бібліотеки jQuery UI:

Тепер нам потрібно елемент поруч з полем форми, в якому буде знаходитися повзунок діапазону. Створимо звичайний порожній div:

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

$(function(){
$( «#slider-range» ).slider({
range: true,
min: 0,
max: 1000,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( «#price» ).val( «$» + ui.values[ 0 ] + » — $» + ui.values[ 1 ] );
}
});
$( «#price» ).val( «$» + $( «#slider-range» ).slider( «values», 0 ) +
«- $» + $( «#slider-range» ).slider( «values», 1 ) );
});

Перевіримо, як працює наш код.

Супер! Все працює. Тепер користувач може тягнути повзунки слайдера і змінювати діапазон значень ціни. В API слайдера ви знайдете всілякі його налаштування. Я, мабуть, зміню лише крок діапазону. За замовчуванням крок дорівнює одиниці. В інтернет-магазинах ціни можуть бути круглими значеннями, тому я поставлю крок 10 і початкове значення мінімальне — 0. Для цього я додам властивість step і трохи зміню властивість values:

values: [ 0, 300 ],
step: 10,

Відмінно, все працює! На цьому у мене все. Удачі!