<input type="range">

<p>Audio settings:</p> <div> <input type="range" id="volume" name="volume" min="0" max="11" /> <label for="volume">Volume</label> </div> <div> <input type="range" id="cowbell" name="cowbell" min="0" max="100" value="90" step="10" /> <label for="cowbell">Cowbell</label> </div> 

p, label { font: 1rem "Fira Sans", sans-serif; } input { margin: 0.4rem; } 

Wenn der Browser des Benutzers den Typ range nicht unterstützt, wird er als Eingabe vom Typ text behandelt.

Der Wert eines <input type="range">-Elements wird über das value-Attribut festgelegt, welches einen String akzeptiert, der die gewählte Nummer repräsentiert. Der Wert ist niemals eine leere Zeichenkette (""). Der Standardwert liegt in der Mitte zwischen dem angegebenen Minimum und Maximum—es sei denn, das Maximum tatsächlich kleiner ist als das Minimum, in diesem Fall wird der Standardwert auf den Wert des min-Attributs eingestellt. Der Algorithmus zur Bestimmung des Standardwerts ist:

defaultValue = rangeElem.max < rangeElem.min ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min) / 2; 

Wenn versucht wird, den Wert unter das Minimum zu setzen, wird er auf das Minimum gesetzt. Ebenso resultiert ein Versuch, den Wert über das Maximum zu setzen, darin, dass er auf das Maximum gesetzt wird.

Es gibt keine Muster-Validierung; jedoch werden folgende Formen der automatischen Validierung durchgeführt:

• Wenn das value auf etwas gesetzt wird, das nicht in eine gültige Gleitkommazahl umgewandelt werden kann, schlägt die Validierung fehl, da die Eingabe eine schlechte Eingabe aufweist.
• Der Wert wird nicht kleiner sein als min. Der Standard ist 0.
• Der Wert wird nicht größer sein als max. Der Standard ist 100.
• Der Wert wird ein Vielfaches von step sein. Der Standard ist 1.

Zusätzlich zu den Attributen, die allen <input>-Elementen gemeinsam sind, bieten Bereichseingaben die folgenden Attribute:

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> bietet eine Liste vordefinierter Werte, um dem Benutzer für diese Eingabe Vorschläge zu machen. Werte in der Liste, die nicht mit dem type kompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Siehe das Beispiel für das Hinzufügen von Markierungen unten, um zu sehen, wie die Optionen für einen Bereich in unterstützten Browsern gekennzeichnet sind.

Der größte Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebene value diesen überschreitet, schlägt das Element in der Constraint-Validierung fehl. Wenn der Wert des max-Attributs keine Zahl ist, dann hat das Element keinen Maximalwert.

Dieser Wert muss größer oder gleich dem Wert des min-Attributs sein. Siehe das HTML-Attribut max.

Der kleinste Wert im Bereich der zulässigen Werte. Wenn der value des Elements kleiner ist als dieser, schlägt das Element in der Constraint-Validierung fehl. Wenn ein Wert für min angegeben wird, der keine gültige Zahl ist, hat die Eingabe keinen Minimalwert.

Dieser Wert muss kleiner oder gleich dem Wert des max-Attributs sein. Siehe das HTML-Attribut min.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss. Nur Werte, die dem angegebenen Schrittintervall entsprechen (min falls angegeben, oder value ansonsten, oder ein angemessener Standardwert, falls keiner dieser Werte bereitgestellt wird) sind gültig.

Das step-Attribut kann auch auf den Stringwert any gesetzt werden. Dieser step-Wert bedeutet, dass kein Schrittintervall impliziert ist und jeder Wert im angegebenen Bereich erlaubt ist (außer anderen Einschränkungen wie min und max). Siehe das Beispiel Schritteinstellung auf den any Wert um zu sehen, wie dies in unterstützten Browsern funktioniert.

Der Standard-Schrittwert für range-Eingaben ist 1, wodurch nur ganze Zahlen eingegeben werden können, es sei denn, die Schrittbasis ist keine Ganze Zahl; zum Beispiel, wenn Sie min auf -10 und value auf 1.5 setzen, dann erlaubt ein step von 1 nur Werte wie 1.5, 2.5, 3.5,… in positiver Richtung und -0.5, -1.5, -2.5,… in negativer Richtung. Siehe das HTML step Attribut.

Ähnlich dem nicht standardmäßigen CSS-Attribut -moz-orient, welches die <progress> und <meter>-Elemente beeinflusst, definiert das orient-Attribut die Ausrichtung des Bereichsreglers. Zu den Werten gehören horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wobei der Bereich vertikal gerendert wird.

Während der number-Typ es den Benutzern ermöglicht, eine Zahl mit optionalen Einschränkungen einzugeben, die ihren Wert zwischen einem Minimum- und einem Maximumwert erzwingen, erfordert er, dass sie einen spezifischen Wert eingeben. Der range-Eingabetyp ermöglicht es Ihnen, den Benutzer nach einem Wert zu fragen, in Fällen, in denen der Benutzer sich vielleicht nicht einmal darum kümmert oder weiß, welcher spezifische numerische Wert ausgewählt ist.

Einige Beispiele für Situationen, in denen Bereichseingaben häufig verwendet werden:

• Audiosteuerungen wie Lautstärke und Balance oder Filtersteuerungen.
• Farbkonfigurationssteuerungen wie Farbkanäle, Transparenz, Helligkeit usw.
• Spielkonfigurationssteuerungen wie Schwierigkeitsgrad, Sichtreichweite, Weltgröße usw.
• Passwortlänge für ein von einem Passwort-Manager generiertes Passwort.

In der Regel, wenn der Benutzer eher an dem Prozentsatz der Entfernung zwischen dem Minimum und dem Maximum interessiert ist als an der tatsächlichen Zahl selbst, ist eine Bereichseingabe ein guter Kandidat. Beispielsweise denken Benutzer im Fall einer Heimstereo-Lautstärkeregelung typischerweise "Lautstärke auf halbem Weg zum Maximum einstellen" anstatt "Lautstärke auf 0.5 einstellen".

Standardmäßig ist das Minimum 0 und das Maximum 100. Wenn das nicht das ist, was Sie wollen, können Sie leicht andere Grenzen festlegen, indem Sie die Werte der min und/oder max Attribute ändern. Diese können jeden Gleitkommawert annehmen.

Zum Beispiel, um den Benutzer nach einem Wert zwischen -10 und 10 zu fragen, können Sie folgendes verwenden:

<input type="range" min="-10" max="10" /> 

Die Granularität ist standardmäßig 1, was bedeutet, dass der Wert immer eine ganze Zahl ist. Um die Granularität zu steuern, können Sie das step-Attribut ändern. Wenn Sie beispielsweise einen Wert in der Mitte zwischen 5 und 10 benötigen, sollten Sie den step-Wert auf 0.5 setzen:

Setzen des step-Attributs

<input type="range" min="5" max="10" step="0.5" /> 

Setze step auf any

Wenn Sie jeden Wert unabhängig von der Anzahl der Dezimalstellen akzeptieren möchten, können Sie für das step Attribut den Wert any angeben:

HTML

<input id="pi_input" type="range" min="0" max="3.14" step="any" /> <p>Value: <output id="value"></output></p> 

JavaScript

const value = document.querySelector("#value"); const input = document.querySelector("#pi_input"); value.textContent = input.value; input.addEventListener("input", (event) => { value.textContent = event.target.value; }); 

Dieses Beispiel ermöglicht es dem Benutzer, jeden Wert zwischen 0 und π ohne Einschränkungen bezüglich des Bruchteils des ausgewählten Wertes auszuwählen. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, wenn der Benutzer mit dem Bereich interagiert.

Um Markierungen zu einer Bereichssteuerung hinzuzufügen, fügen Sie das list-Attribut hinzu und geben ihm die id eines <datalist>-Elements, das eine Reihe von Markierungen auf der Steuerung definiert. Jeder Punkt wird mit einem <option>-Element repräsentiert, dessen value auf den Wert des Bereichs gesetzt ist, an dem eine Markierung gezeichnet werden soll.

HTML

<label for="temp">Choose a comfortable temperature:</label><br /> <input type="range" id="temp" name="temp" list="markers" /> <datalist id="markers"> <option value="0"></option> <option value="25"></option> <option value="50"></option> <option value="75"></option> <option value="100"></option> </datalist> 

Ergebnis

Um Code-Duplikationen zu vermeiden, können Sie dieselbe <datalist> für mehrere <input type="range">-Elemente und andere <input>-Typen wiederverwenden.

HTML

<p> <label for="temp1">Temperature for room 1:</label> <input type="range" id="temp1" name="temp1" list="values" /> </p> <p> <label for="temp2">Temperature for room 2:</label> <input type="range" id="temp2" name="temp2" list="values" /> </p> <p> <label for="temp3">Temperature for room 3:</label> <input type="range" id="temp3" name="temp3" list="values" /> </p> <datalist id="values"> <option value="0" label="0"></option> <option value="25" label="25"></option> <option value="50" label="50"></option> <option value="75" label="75"></option> <option value="100" label="100"></option> </datalist> 

Ergebnis

Sie können Markierungen labeln, indem Sie den <option>-Elementen label-Attribute geben. Der Labelinhalt wird jedoch standardmäßig nicht angezeigt. Sie können CSS verwenden, um die Labels anzuzeigen und sie korrekt zu positionieren. Hier ist eine Möglichkeit, wie Sie dies tun könnten.

HTML

<label for="tempB">Choose a comfortable temperature:</label><br /> <input type="range" id="tempB" name="temp" list="values" /> <datalist id="values"> <option value="0" label="very cold!"></option> <option value="25" label="cool"></option> <option value="50" label="medium"></option> <option value="75" label="getting warm!"></option> <option value="100" label="hot!"></option> </datalist> 

CSS

datalist { display: flex; flex-direction: column; justify-content: space-between; writing-mode: vertical-lr; width: 200px; } option { padding: 0; } input[type="range"] { width: 200px; margin: 0; } 

Ergebnis

Standardmäßig rendern Browser Bereichseingaben als Schieberegler, bei denen der Regler links und rechts gleitet.

Um eine vertikale Bereichssteuerung zu erstellen, bei der der Regler auf und ab gleitet, setzen Sie die writing-mode-Eigenschaft auf einen Wert von entweder vertical-rl oder vertical-lr:

<input type="range" min="0" max="10" value="8" /> 

input[type="range"] { writing-mode: vertical-lr; } 

Dies führt dazu, dass der Bereichsregler vertikal gerendert wird:

Sie können auch die CSS appearance-Eigenschaft auf den nicht standardmäßigen Wert slider-vertical setzen, wenn Sie ältere Versionen von Chrome und Safari unterstützen möchten, und das nicht standardmäßige orient="vertical"-Attribut hinzufügen, um ältere Versionen von Firefox zu unterstützen.

Siehe Erstellen vertikaler Steuerungen für Beispiele.

• HTML-Formulare
• <input> und die HTMLInputElement Schnittstelle, auf der es basiert
• <input type="number">
• validityState.rangeOverflow und validityState.rangeUnderflow
• Kontrolle mehrerer Parameter mit ConstantSourceNode
• Erstellen vertikaler Steuerungen
• Styling des Bereichselements