Multirange Polyfill Support til Dual-Handle HTML5 Sliders

Det nye HTML5-sortimentindgange er fantastiske for mængder og dynamiske valg som datoer. Men standardrækkevidderen understøtter ikke flere håndtag.

Gå ind multirange, -en polyfill oprettet til understøttelse af flere håndtag Det fungerer korrekt og understøtter alle større browsere.

Dette er en gratis værktøj og det giver den bedste måde at tilføj flere håndtag indbygget, uden at bruge et plugin. Denne polyfill har to ressourcer: a JS-fil og a CSS-fil. De begge arbejder på rækkeindgange og du kan download dem begge fra de vigtigste GitHub repo.

Bemærk dette betyder at du skal arbejde med browsere som Understøtter allerede rækkeviddeindgangen som standard. Det også kræver CSS variabler som ikke understøttes i alle browsere.

Heldigvis, Multirange bruger en CSS-tilbagesendelse hvor to række skydere bruges i stedet for en. Dette er ikke en perfekt løsning, men det giver stadig en brugbar grænseflade. På plus side, dette fungerer lige ud af boksen uden strammer fastgjort.

Lige Tilføj filerne til dit websted og du vil kunne brug mange attribut på dine skyderen felter. Du kan også indstillingsintervaller for indgangsværdier med et komma.

Her er en kort uddrag af HTML ved hjælp af skyderen Multirange:

Håndtagene kan være trak forbi hinanden og endda venstre oven på hinanden. Og rækkevidden indlæses stadig understøtter tastaturnavigation hvilket er fantastisk til tilgængelighed.

Alle demoer og kildekode prøver kan findes på Multirange websiden, så tjek det ud, hvis du nogensinde leder efter en multi-range HTML skyder.