CoreRange
Примеры использования и документация.
Выбор интервала «от — до» или нескольких порогов N бегунками: пользователь задаёт диапазон цены, дат или набор порогов, не вбивая числа вручную. Один бегунок превращает компонент в обычный слайдер.
Технические детали: N нативных <input type="range"> друг над другом (клавиатура, тач, скринридеры — бесплатно; aria-label с labels или «Значение i»). Границы min/max (0–100), шаг step, gap — минимальное расстояние между соседними бегунками (пересечение невозможно; gap не может быть меньше step и больше длины диапазона; подбирайте N и gap так, чтобы N·gap ≤ max−min). Бегунок при перетаскивании упирается в соседа и останавливается — не толкает его, симметрично с обеих сторон. Значения снапятся к шагу и клампятся; начальное значение нормализуется: сортировка, нестандартные min/max, зазоры. Заливка — отрезки между соседними бегунками (у одного бегунка заливки нет). flow — отрезки переливаются градиентом (цвета темы).
Значение: 60 (шаг 5)
Диапазон: 15 — 85 (шаг 5, зазор 5)
Диапазон: 20 — 80 (шаг 5)
Пороги: 10 · 35 · 60 · 85 (шаг 5, зазор 5)