Multirange Polyfill Підтримка повзунків HTML5 з двома ручками

The нові входи діапазону HTML5 є фантастичними для кількості та динамічного вибору, як дати. Але повзунок діапазону за замовчуванням не підтримує декілька ручок.

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

Це безкоштовний інструмент і це забезпечує найкращий спосіб додайте декілька ручок на рідному рівні, без використання плагіна. Цей поліфіл має два ресурси: a JS-файл а CSS-файл. Вони обидва працюють на входах діапазону і ви можете завантажити обидва з них від головного репо GitHub.

Зверніть увагу, що це означає, що вам потрібно працювати з браузерами вже підтримують вхід діапазону за замовчуванням. Він також вимагає змінних CSS які не підтримуються у всіх браузерах.

На щастя, Multirange використовує запасний варіант CSS де замість одного використовуються два повзунки діапазону. Це не ідеальне рішення, але воно все ще пропонує корисний інтерфейс. З позитивного боку, це працює прямо з коробки без додатків.

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

Ось a короткий фрагмент HTML за допомогою повзунка Multirange:

Ручки можуть бути потягнулися повз один одного і навіть залишилися один на одного. І вхід діапазону ще підтримує навігацію за клавіатурою що є чудовим для доступності.

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