Obsługa multirange Polyfill dla suwaków HTML5 z dwoma uchwytami

The nowe wejścia zakresu HTML5 są fantastyczne dla ilości i dynamicznych wyborów, takich jak daty. Ale domyślny suwak zakresu nie obsługuje wielu uchwytów.

Wchodzić Multirange, za wypełniacz stworzony do obsługi wielu uchwytów które działają poprawnie i obsługują wszystkie główne przeglądarki.

To jest bezpłatne narzędzie i zapewnia najlepszy sposób dodaj wiele uchwytów natywnie, bez użycia wtyczki. Ten wypełniacz ma dwa zasoby: a Plik JS i a Plik CSS. one oba działają na wejściach zasięgu i możesz pobierz oba z nich z głównego repo GitHub.

Zauważ, że oznacza to, że musisz pracować z przeglądarkami już obsługuje wejście zakresu domyślnie. To także wymaga zmiennych CSS które nie są obsługiwane we wszystkich przeglądarkach.

Na szczęście Multirange używa rezerwowego CSS gdzie zamiast jednego używane są dwa suwaki zasięgu. To nie jest idealne rozwiązanie, ale nadal oferuje użyteczny interfejs. Na plus, to działa od razu po wyjęciu z pudełka bez dołączonych smyczków.

Właśnie dodaj pliki do swojej witryny i będziesz w stanie Użyj wielokrotność atrybut na polach suwaka. Możesz również ustawić zakresy dla wartości wejściowych z przecinkiem.

Tutaj jest krótki fragment kodu HTML za pomocą suwaka Multirange:

Uchwyty mogą być przeciągnięty obok siebie i nawet pozostawione jedna na drugiej. I jeszcze zakres wejściowy obsługuje nawigację za pomocą klawiatury co jest świetne dla dostępności.

Wszystkie dema i próbki kodu źródłowego można znaleźć na stronie internetowej Multirange, więc sprawdź, czy kiedykolwiek szukasz wielozakresowy suwak HTML.