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.
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).
In Internet Explorer und Edge ist der Range-Slider ein blaues Rechteck mit einem viereckigen Anfasser.
<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. Nur Internet Explorer zeigte sowohl Ticks (Unterteilungen) als auch ein Wertefeld in der Mitte des Range-Sliders, solange der Nutzer den Slider zieht.
Die Anzeige des aktuellen Werts des Schiebereglers (tooltip) kann aber mit einer Zeile CSS unterdrückt werden.
input[type=range]::-ms-tooltip {
display: none;
}
Die Anpassung des range-Sliders mit CSS ist wie bei vielen Eingabe-Elementen nicht trivial, 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;
});
