Многополосная поддержка Polyfill для слайдеров HTML5 с двумя ручками

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

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

Читайте также: типы ввода форм HTML5: дата, цвет и диапазон

Это бесплатный инструмент, который обеспечивает лучший способ добавить несколько дескрипторов без использования плагина. Эта polyfill имеет два ресурса: файл JS и файл CSS. Они оба работают на входах диапазона, и вы можете скачать оба из основной репозиторий GitHub,
Обратите внимание, это означает, что вам нужно работать с браузерами, которые уже поддерживают ввод диапазона по умолчанию. Это также требует переменных CSS, которые не поддерживается во всех браузерах.
К счастью, Multirange использует запасной вариант CSS, где вместо одного используются два ползунка диапазона. Это не идеальное решение, но все же предлагает удобный интерфейс. С положительной стороны, это работает прямо из коробки без каких-либо условий.

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

Вот краткий фрагмент HTML с использованием ползунка Multirange:

Ручки можно перетаскивать друг за другом и даже оставлять друг на друге. И ввод диапазона все еще поддерживает навигацию с помощью клавиатуры, которая отлично подходит для доступности.

Все демоверсии и примеры исходного кода можно найти на многодиапазонной веб-страницетак что проверьте, если вы когда-либо искали многодиапазонный HTML-слайдер.

Читайте также: Как оформить слайдер диапазона HTML5 в нескольких браузерах