Multirange Polyfill Støtte for Dual-Handle HTML5 Sliders

De nye HTML5-rekkeviddeinnganger er fantastisk for mengder og dynamiske valg som datoer. Men glidebryteren for standard rekkevidde støtter ikke flere håndtak.

Tast inn multirange, en Polyfill opprettet for å støtte flere håndtak som fungerer riktig og støtter alle de store nettleserne.

Dette er en gratis verktøy og det gir den beste måten å legg til flere håndtak nativt, uten å bruke et plugin. Denne polyfill har to ressurser: a JS-fil og a CSS-fil. De begge arbeider med rekkeviddeinnganger og du kan last ned begge fra de viktigste GitHub repoene.

Merk dette betyr at du må jobbe med nettlesere som Støtter allerede rekkeviddeinngangen som standard. Det også krever CSS variabler som ikke støttes i alle nettlesere.

Heldigvis, Multirange bruker en CSS-tilbakebetaling hvor to skyvekontrollere brukes i stedet for en. Dette er ikke en perfekt løsning, men det gir fortsatt et brukbart grensesnitt. På plussiden, dette fungerer rett ut av esken uten strenger festet.

Bare legg til filene på nettstedet ditt og du vil kunne bruke flere Egenskap på skyvefeltene dine. Du kan også angi intervaller for inngangsverdier med komma.

Her er en kort utdrag av HTML ved hjelp av glidebryteren Multirange:

Håndtakene kan være dratt forbi hverandre Til og med igjen på toppen av hverandre. Og rekkefølgen inngang fortsatt støtter tastaturnavigasjon som er flott for tilgjengelighet.

Alle demoer og kildekodeprøver kan bli funnet på Multirange nettsiden, så sjekk det om du noensinne leter etter en multi-range HTML skyveknapp.