Создание двойного HTML5 слайдера для выбора диапазона цен

Быстрый ответ

Для создания двойного ползунка рекомендуется использовать пару тегов <input type="range">. Эти элементы позволяют пользователю интерактивно определять диапазон значений. Вот пример кода, который создает двойной ползунок:

<input type="range" id="lower" oninput="upper.value=this.value<this.max?this.value:upper.value" min="0" max="100" step="1">
<input type="range" id="upper" oninput="lower.value=this.value>lower.min?this.value:lower.value" min="0" max="100" step="1">

Такой подход позволяет одному ползунку реагировать на изменения другого, не позволяя им пересечься и сохраняя заданный диапазон значения. Такое решение не требует использования затратных библиотек и отличается своим минимализмом.

Модернизируем ползунок: применяем CSS и JavaScript

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

Стилизация с помощью CSS

Оформление может придать вашим ползункам стильный и современный вид. Например, основной CSS может выглядеть следующим образом:

/* Стиль обладает вечной сущностью... */
input[type='range'] {
  -webkit-appearance: none;
  width: 100%;
  margin: 5px 0;
}
input[type='range']:focus {
  /* Исключение контура */
  outline: none;
}
/* Дополнительная стилизация тумблера и трека */

Вы можете полностью адаптировать визуализацию трека и тумблера под свой дизайн, обеспечивая функциональность в различных браузерах.

Подробнее об этом расскажет наш спикер на видео

Использование JavaScript для интерактивности

Событие oninput позволяет обновлять показания ползунков в реальном времени во время их использования.

// Осуществляем обновление данных при вводе 
document.getElementById('lower').addEventListener('oninput', function() {
  // Обновляем значения и визуальные показатели
});
document.getElementById('upper').addEventListener('oninput', function() {
  // Отыскиваем больше возможностей для обновления для достижения максимальной интерактивности слайдера
});

JavaScript предоставляет полное управление над действиями ползунков, гарантируя корректность их значений и отсутствие конфликтов.

Применение библиотеки noUiSlider

Для расширения возможностей ползунков можно использовать библиотеку noUiSlider, которая превосходит ограничения HTML.

<!-- Место для div-блока слайдера -->
<div id="slider"></div>
<!-- Подключение стилей и скриптов -->
<link href="nouislider.min.css" rel="stylesheet">
<script src="nouislider.min.js"></script>

// Активируем слайдер через JavaScript
var slider = document.getElementById('slider');

noUiSlider.create(slider, {
  start: [20, 80],
  connect: true,
  range: {
    'min': 0,
    'max': 100
  }
});

noUiSlider облегчает создание ползунков с пользовательскими диапазонами и создает привлекательное визуальное соединение элементов.

Визуализация

🛤️🛤️ 🔘----------🔴-----------------------🔵---------- (Минимальное значение) (Максимальное значение)

На данной иллюстрации два ползунка разместились на одном треке и демонстрируют минимальное и максимальное значение диапазона, что облегчает его восприятие.

Разработка универсального кода

При разработке двойного ползунка в HTML важно учитывать масштабируемость и возможность повторного использования кода. Это обеспечит удобство поддержки и упростит интеграцию в различные части вашего приложения.

Конфигурация многоразовых HTML-блоков

Используя простую структуру HTML, вы сможете облегчить техническую поддержку и повторное использование кода:

<!-- Теперь создание ползунков стало удивительно простым! -->
<div class="range-slider">
  <input type="range" class="lower" /*...*/>
  <span class="slider-value">0</span>
  <input type="range" class="upper" /*...*/>
  <span class="slider-value">100</span>
</div>

Такие многоразовые блоки экономят ваше время, упрощая создание нескольких ползунков без дублирования кода.

Динамическая корректировка диапазонов

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

/* Управление перекрытием диапазонов для поддержания целосности функционала */
function updateRange(lowerSlider, upperSlider) {
  // Здесь будет выполняться логика корректировки диапазона и отображения обновлений
};

Стилизация с применением noUiSlider

noUiSlider предлагает возможности для одновременного отображения и взаимодействия ползунков и трека, что улучшает восприятие пользователем.

/* Элементы, соединяющие ползунки, должны быть и визуально связаны */
.noUi-connect {
  background: #abc;
}

Благодаря этому, пользователи легко могут определить выбранный диапазон.

Полезные материалы

1. <input type="range"> – HTML: язык гипертекстовой разметки | MDN — руководство и примеры использования элемента input range в HTML5.
2. Стилизация ползунков для разных браузеров с CSS | CSS-Tricks — советы по стилизации для совместимости с разными браузерами.
3. rangeslider.js — простая JavaScript-библиотека для настройки ползунков.
4. Multirange: Миниатюрный полифилл для HTML5-ползунков с двумя ручками | Достижения Леа Веру — полифилл, созданный Леа Веру, для реализации двойных ползунков.
5. Как создать ползунок диапазона — подробное руководство по созданию различных видов ползунков.
6. nouislider – npm — npm-пакет для настройки гибких ползунков, поддерживающих сенсорное управление и доступность.