Multirange Polyfill-Unterstützung für Dual-Handle-HTML5-Schieberegler

Das neue HTML5-Bereichseingaben sind fantastisch für Mengen und dynamische Auswahlen wie Datumsangaben. Der voreingestellte Bereichsschieberegler unterstützt nicht mehrere Handles.

Eingeben Multirange, ein polyfill wurde erstellt, um mehrere Handles zu unterstützen die richtig funktionieren und alle gängigen Browser unterstützen.

Das ist ein kostenloses Werkzeug und es bietet den besten Weg zu Mehrere Ziehpunkte nativ hinzufügen, ohne ein Plugin zu verwenden. Diese Polyfill hat zwei Ressourcen: ein JS-Datei und ein CSS-Datei. Sie Beide arbeiten mit Bereichseingaben und du kannst Laden Sie beide herunter aus dem wichtigsten GitHub Repo.

Beachten Sie, dass Sie mit Browsern arbeiten müssen unterstützen bereits die Range-Eingabe standardmäßig. Es auch erfordert CSS-Variablen welche nicht in allen Browsern unterstützt werden.

Zum Glück Multirange verwendet einen CSS-Fallback wo zwei Bereichsschieberegler anstelle von einem verwendet werden. Dies ist keine perfekte Lösung, bietet aber dennoch eine benutzerfreundliche Oberfläche. Auf der positiven Seite, dies funktioniert gleich nach dem Auspacken ohne Bedingungen.

Gerade Fügen Sie die Dateien Ihrer Site hinzu und du wirst in der Lage sein benutze die mehrere Attribut auf deinen Sliderfeldern. Du kannst auch Stellen Sie Bereiche für die Eingabewerte ein mit einem Komma.

Hier ist ein kurzer HTML-Ausschnitt Verwenden des Multirange-Schiebereglers:

Die Griffe können sein aneinander vorbeigezogen und selbst links übereinander. Und der Bereichseingang noch unterstützt die Tastaturnavigation das ist gut für die Zugänglichkeit.

All die Demos und Quellcode-Beispiele finden Sie auf der Multirange-Webseite. Schauen Sie also nach, ob Sie nach einem suchen Mehrbereichs-HTML-Schieberegler.