Supporto multirange Polyfill per cursori HTML5 a doppio manico

Il nuovi input della gamma HTML5 sono fantastici per quantità e selezioni dinamiche come le date. Ma il cursore dell'intervallo predefinito non supporta più maniglie.

accedere Multirange, un polyfill creato per supportare più maniglie funziona correttamente e supporta tutti i principali browser.

Questo è un strumento gratuito e fornisce il modo migliore per aggiungi più maniglie in modo nativo, senza usare un plugin. Questo polyfill ha due risorse: a File JS e a File CSS. Essi entrambi funzionano sugli input della gamma e tu puoi scaricare entrambi dal principale repo GitHub.

Nota questo significa che devi lavorare con i browser già supportano l'intervallo di input per impostazione predefinita. Anche richiede variabili CSS che non sono supportati in tutti i browser.

Per fortuna, Multirange usa un fallback CSS dove vengono usati due cursori di intervalli invece di uno. Questa non è una soluzione perfetta ma offre comunque un'interfaccia utilizzabile. Tra i lati positivi, questo funziona subito fuori dagli schemi senza vincoli.

Appena aggiungi i file al tuo sito e sarai in grado di utilizzare il multiplo attributo sui tuoi campi di scorrimento. Puoi anche impostare gli intervalli per i valori di input con una virgola.

Ecco un breve snippet di HTML usando il cursore Multirange:

Le maniglie possono essere trascinati l'un l'altro e persino lasciato uno sopra l'altro. E l'intervallo di input ancora supporta la navigazione da tastiera che è ottimo per l'accessibilità.

Tutti i demo e esempi di codice sorgente può essere trovato sulla pagina Web Multirange, quindi verificarlo se si è sempre alla ricerca di slider HTML multi-range.