Sichere Eingaben
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">
Per Vorgabe zeigt der Slider weder Schrittweiten noch einen aktuell eingestellten Wert an. Nur Internet Explorer zeigt 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;
}
Attribute für range
| Attribut | Aufgabe |
|---|---|
| value | Das value-Attribut (wie in anderen Input-Elemente). 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 |
| 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.
Range-Script
const slider = document.querySelector("#slider");
const output = document.querySelector("output");
document.addEventListener('DOMContentLoaded', function() {
output.value = slider.value;
});
slider.addEventListener ("input", function () {
output.value = this.value;
});