input type = range – Schieberegler oder Slider

input type = range : Eingabefeld als 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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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;
}
Darstellung input type range in versch. Browsern
Unterschiedliche Darstellung von Range Slidern in Edge, Chrome, Safari, IE

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

AttributAufgabe
valueDas 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.
minMinimaler Wert des Bereichs. Vorgabe ist 0.
maxMaximaler Wert des Bereichs. Vorgabe ist 100
nameWie bei allen anderen Input-Elementen: Attribut für die Übergabe der Daten an eine serverseitige Anwendung.
stepSchrittweite des Range-Sliders. Vorgabe ist 1, nur Integer (ganze Zahlen), außer wenn Minimum ein negativer Wert ist
listList 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;
});