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

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

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

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

Обратите внимание, это означает, что вам нужно работать с браузерами, которые уже поддерживает диапазон ввода по умолчанию. Это также требует переменных CSS которые поддерживаются не во всех браузерах.

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

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

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

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

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