input type = range – Schieberegler oder Slider
input type = range bildet einen Slider oder Schieberegler als Eingabehilfe für den Nutzer und erzeugt eine Zahl (aus Sicht von Javascript als String). Ein Slider anstelle der Eingabe eines numerischen Werts ist weniger für die Eingabe einer exakten Zahl, sondern eher für relative Werte wie Lautstärke, Farbton oder Helligkeit gedacht.
Sichere Eingaben
Hier denkt der Nutzer nicht in Zahlen, sondern in Kategorien niedrig bis hoch, leise bis laut, dunkel bis hell, billig bis teuer, einfach bis schwierig. Da der Slider einen Wertebereich festlegt, kann der Nutzer keine falschen Werte eingeben. Technisch ist ein Range aber auch präzise und kann exakte Zahlen liefern.
Wie bei den meisten Eingabefeldern hat jeder Browser eine andere Vorstellung von der graphischen Darstellung des Schiebers. Chrome, Firefox, Opera und Safari zeigen eine dünne graue Linie und einen kreisförmigen Button oder Anfasser (grau oder blau).
<input type="range" min="-5" max="5" step="1.0" value="0">
Ohne die Angabe eines value-Attributs liegt der Anfasser per Vorgabe in der Mitte des Sliders und ebenfalls per Vorgabe ist die Schrittweite 1.
Das range-Element zeigt ohne Javascript weder Schrittweiten noch einen aktuell eingestellten Wert an.
Die Anpassung des range-Sliders mit CSS ist heute deutlich stabiler und auch größtenteils konsistent geworden, aber für die mobilen Geräte ist der range-Slider zu klein, um ihn sicher mit dem Finger zu bedienen. CSS für input type range lohnt sich auf jeden Fall.
Attribute für range
| Attribut | Aufgabe |
|---|---|
| value | Das value-Attribut (wie in anderen Input-Elementen). Per Vorgabe wird der Wert für das Minium plus die Hälfte des Maximums an die Anwendung übertragen. |
| min | Minimaler Wert des Bereichs. Vorgabe ist 0. |
| max | Maximaler Wert des Bereichs. Vorgabe ist 100 |
| name | Wie bei allen anderen Input-Elementen: Attribut für die Übergabe der Daten an eine serverseitige Anwendung. |
| step | Schrittweite des Range-Sliders. Vorgabe ist 1, nur Integer (ganze Zahlen), außer wenn Minimum ein negativer Wert ist |
| list | List ist eine Werteliste, zurzeit in keinem Browser implementiert |
Range-Value-Anzeige mit Javascript
Um den Nutzer den aktuellen Wert des Range-Sliders zu zeigen, muss Javascript einspringen. Das Script setzt den Wert in HTML output.
Range-Script
const slider = document.querySelector("#slider");
const output = document.querySelector("output");
slider.addEventListener ("input", function () {
output.value = this.value;
});
