input type="range"

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.

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. 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">

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;
}
Unterschiedliche Darstellung von Range Slidern in Internet Explorer 11, Edge, Chrome, Safari
AttributAufgabe
valueDas 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.
minMinimaler Wert des Bereichs. Vorgabe ist 0.
maxMaximaler Wert des Bereichs. Vorgabe ist 100
nameWie bei allen anderen Input-Elementen
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.

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;
});
A A Unterschiedliche Darstellung von Range Slidern in Internet Explorer 11, Edge, Chrome, Safari