Вихідні файли поточної статті ви можете завантажити за посиланням.
Отже, у нас є найпростіше текстове поле форми, в яке, як ми припускаємо, користувач повинен ввести мінімальну і максимальну ціну, тобто якийсь діапазон цін, в якому він підшукує товар.
Теоретично користувачеві не складе особливих труднощів ввести такий діапазон. Але на практиці все ж буде простіше підказати користувачу формат даних, що приймаються, а ще краще максимально спростити процес. Найпростіше це зробити за допомогою слайдера або повзунка, перетягуючи який, користувач матиме можливість змінити мінімальну і максимальну ціни.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Такий повзунок нам допоможе реалізувати бібліотека jQuery UI. Завантажити і підключимо цю бібліотеку. Якщо ви не знаєте, як це зробити, тоді пропоную звернутися до статті jQuery UI календар.
Власне, нам необхідно підключити файл стилів і скриптів бібліотеки jQuery UI:
Тепер нам потрібно елемент поруч з полем форми, в якому і буде перебувати повзунок діапазону. Створимо звичайний порожній div:
Тепер инициализируем віджет Slider. Для цього візьмемо код його виклику з документації і використовуємо його, замінивши в ньому елементи верстки своїми при необхідності:
Перевіримо, як працює наш код.
Супер! Все працює. Тепер користувач може тягнути повзунки слайдера і змінювати діапазон значень ціни. В API слайдера ви знайдете всілякі його налаштування. Я, мабуть, зміню лише крок діапазону. За замовчуванням крок дорівнює одиниці. В інтернет-магазинах ціни можуть бути круглими значеннями, тому я поставлю крок 10 і початкове мінімальне значення - 0. Для цього я додам властивість step і трохи зміню властивість values:
Відмінно, все працює! На цьому у мене все. Успіхів!
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі