Multirange Polyfill Stöd för dubbla handtag HTML5 Sliders

De nya HTML5-sortimentingångar är fantastiska för kvantiteter och dynamiska val som datum. Men standardintervallreglaget stöder inte flera handtag.

Stiga på Multirange, en polyfill skapad för att stödja flera handtag som fungerar korrekt och stöder alla större webbläsare.

Det här är en gratis verktyg och det ger det bästa sättet att lägg till flera handtag nationellt, utan att använda ett plugin. Denna polyfill har två resurser: a JS-fil och a CSS-fil. De båda arbetar med intervallintervall och du kan ladda ner dem båda från den huvudsakliga GitHub repo.

Observera det här betyder att du måste arbeta med webbläsare som stödja redan sortimentet som standard. Det är också kräver CSS-variabler som inte stöds i alla webbläsare.

Tack och lov, Multirange använder en CSS-fallback där två räckvidder används istället för en. Detta är inte en perfekt lösning men det erbjuder fortfarande ett användbart gränssnitt. På den positiva sidan, detta fungerar rätt ut ur lådan utan några strängar.

Bara lägg till filerna på din webbplats och du kommer att kunna Använd flera olika attribut i dina reglagefält. Du kan också ställa in intervall för inmatningsvärden med ett komma.

Här är en kort snipp av HTML med multirange-reglaget:

Handtagen kan vara dras förbi varandra och även lämnade på toppen av varandra. Och intervallet matas fortfarande in stöder tangentbordsnavigering vilket är bra för tillgängligheten.

Alla demonstrationer och källkodsprover kan hittas på Multirange webbsidan, så kolla in det om du någonsin letar efter a multi-range HTML-reglaget.