Multirange Polyfill-ondersteuning voor HTML5-schuifregelaars met twee hendels

De nieuwe HTML5-bereik-ingangen zijn fantastisch voor hoeveelheden en dynamische selecties zoals datums. Maar de standaardbereikschuifregelaar biedt geen ondersteuning voor meerdere handles.

invoeren multirange, een polyfill gemaakt om meerdere handvatten te ondersteunen die goed functioneren en alle belangrijke browsers ondersteunen.

Dit is een gratis tool en het biedt de beste manier om voeg native meerdere handgrepen toe, zonder een plug-in te gebruiken. Deze polyfill heeft twee bronnen: een JS-bestand en een CSS-bestand. Ze beide werken op bereik-ingangen en jij kan download ze allebei van de hoofdrepos van GitHub.

Let op dit betekent dat je moet werken met browsers dat ondersteunen al de bereikinvoer standaard. Het ook vereist CSS-variabelen die niet in alle browsers worden ondersteund.

Gelukkig, Multirange maakt gebruik van een CSS-fallback waar twee bereikschuifregelaars worden gebruikt in plaats van één. Dit is geen perfecte oplossing, maar het biedt nog steeds een bruikbare interface. Aan de positieve kant, dit werkt direct uit de doos zonder verplichtingen.

Net voeg de bestanden toe aan uw site en je zult in staat zijn om gebruik de meerdere attribuut op uw schuifregelaarvelden. Je kan ook ingestelde bereiken voor invoerwaarden met een komma.

Hier is een kort fragment van HTML met de schuifregelaar Multirange:

De handvatten kunnen zijn langs elkaar gesleurd en zelfs boven op elkaar. En de bereikinvoer is nog steeds ondersteunt toetsenbordnavigatie wat goed is voor de toegankelijkheid.

Al de demos en broncodemonsters is te vinden op de Multirange-webpagina, dus kijk hier eens naar als u ooit op zoek bent naar een HTML-schuif met meerdere reeksen.