<p>Audio settings:</p><div>  <input type="range" name="volume" min="0" max="11" />  <label for="volume">Volume</label></div><div>  <input    type="range"       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 Typrange nicht unterstützt, wird er zurückgesetzt und alstext-Eingabe behandelt.

Der Wert eines<input type="range">-Elements wird mit demvalue-Attribut gesetzt, das eine Zeichenkette akzeptiert, die die ausgewählte Zahl darstellt. Der Wert ist niemals ein leerer String (""). Der Standardwert liegt auf halbem Weg zwischen dem angegebenen Minimum und Maximum - es sei denn, das Maximum ist tatsächlich kleiner als das Minimum, in diesem Fall wird der Standard auf den Wert desmin-Attributs gesetzt. 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 niedriger als das Minimum zu setzen, wird er auf das Minimum gesetzt. Ebenso führt ein Versuch, den Wert höher als das Maximum zu setzen, dazu, dass er auf das Maximum gesetzt wird.

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

• Wenn dervalue auf etwas gesetzt ist, das nicht in eine gültige Gleitkommazahl umgewandelt werden kann, schlägt die Validierung fehl, da die Eingabe ein fehlerhafter Input ist.
• Der Wert wird nicht kleiner alsmin sein. Der Standard ist 0.
• Der Wert wird nicht größer alsmax sein. Der Standard ist 100.
• Der Wert wird ein Vielfaches vonstep sein. Der Standard ist 1.

Neben den Attributen, die von allen<input>-Elementen geteilt werden, bieten Range-Eingaben die folgenden Attribute.

Der Wert deslist-Attributs ist dieid eines<datalist>-Elements, das sich im selben Dokument befindet. Der<datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Alle Werte in der Liste, die mit demtype nicht kompatibel sind, werden in den vorgeschlagenen Optionen nicht eingeschlossen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Sehen Sie sich das unten stehende BeispielHinzufügen von Abhebe-Punkten an, um ein Beispiel dafür zu sehen, wie die Optionen auf einem Bereich in unterstützten Browsern dargestellt werden.

Der größte Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebenevalue diesen überschreitet, schlägt das Element bei derKonstraintvalidierung fehl. Wenn der Wert desmax-Attributs keine Zahl ist, hat das Element keinen Maximalwert.

Dieser Wert muss größer oder gleich dem Wert desmin-Attributs sein. Siehe HTMLmax-Attribut.

Der kleinste Wert im Bereich der erlaubten Werte. Wenn dervalue des Elements kleiner als dieser ist, schlägt das Element bei derKonstraintvalidierung fehl. Wenn ein Wert fürmin angegeben ist, der keine gültige Zahl ist, hat die Eingabe keinen Minimalwert.

Dieser Wert muss kleiner oder gleich dem Wert desmax-Attributs sein. Siehe HTMLmin-Attribut.

Dasstep-Attribut ist eine Zahl, die die Feinheit angibt, der der Wert entsprechen muss, oder der spezielle Wertany, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Step-Basiswert entfernt sind, sind gültig. Die Step-Basis istmin, falls angegeben, ansonstenvalue, oder0, wenn keines von beiden angegeben ist.

Der Standard-Schrittwert fürstep-Eingaben ist1, wodurch nur ganze Zahlen eingegeben werden können —es sei denn, die Basisschritte sind keine ganze Zahl.

Ein Zeichenfolgenwert vonany bedeutet, dass kein Step impliziert ist und jeder Wert erlaubt ist (mit Ausnahme anderer Einschränkungen wiemin undmax). Siehe das BeispielEinstellung von Step auf den Wertany, um zu sehen, wie das in unterstützten Browsern funktioniert.

Ähnlich dem nicht standardmäßigen CSS-Eigenschaft -moz-orient, das die<progress>- und<meter>-Elemente betrifft, definiert dasorient-Attribut die Ausrichtung des Bereichs-Schiebereglers. Werte umfassenhorizontal, was bedeutet, dass der Bereich horizontal dargestellt wird, undvertical, wo der Bereich vertikal dargestellt wird.

Während der Typnumber es Benutzern erlaubt, eine Zahl mit optionalen Einschränkungen einzugeben, die ihren Wert auf ein Minimum und ein Maximum beschränken, erfordert er, dass sie einen spezifischen Wert eingeben. Derrange-Eingabetyp ermöglicht es Ihnen, den Benutzer nach einem Wert zu fragen, in Fällen, in denen der Benutzer möglicherweise gar nicht interessiert ist — oder nicht weiß —, welcher spezifische Zahlenwert ausgewählt wurde.

Einige Beispiele für Situationen, in denen Range-Eingaben häufig verwendet werden:

• Audiosteuerungen wie Lautstärke und Balance oder Filtersteuerungen.
• Farbkonfigurationssteuerungen wie Farbkanäle, Transparenz, Helligkeit usw.
• Spielkonfigurationssteuerungen wie Schwierigkeitsgrad, Sichtbarkeitsdistanz, Weltgröße und so weiter.
• Passwortlänge für von einem Passwort-Manager generierte Passwörter.

Als Regel gilt: Wenn der Benutzer sich wahrscheinlich mehr für den Prozentsatz der Distanz zwischen Mindest- und Höchstwerten interessiert als für die tatsächliche Zahl selbst, ist eine Range-Eingabe eine gute Wahl. Zum Beispiel denkt man bei einer Heim-Stereoanlage-Lautstärkeregelung typischerweise an "Lautstärke auf halber Höhe des Maximums einstellen" statt "Lautstärke auf 0.5 einstellen".

Standardmäßig beträgt das Minimum 0 und das Maximum 100. Wenn das nicht das ist, was Sie wollen, können Sie leicht andere Grenzen angeben, indem Sie die Werte dermin- und/odermax-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 verwenden:

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

Standardmäßig ist die Feinheit 1, was bedeutet, dass der Wert immer eine ganze Zahl ist. Um die Feinheit zu steuern, können Sie dasstep-Attribut ändern. Zum Beispiel, wenn Sie einen Wert haben möchten, der auf halbem Wege zwischen 5 und 10 ist, sollten Sie denstep-Wert auf 0.5 setzen:

Einstellung des Step-Attributs

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

Step aufany setzen

Wenn Sie jeden Wert akzeptieren möchten, unabhängig davon, wie viele Dezimalstellen er hat, können Sie einen Wert vonany für dasstep-Attribut angeben:

HTML

<input type="range" min="0" max="3.14" step="any" /><p>Value: <output></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 π auszuwählen, ohne Einschränkung des Bruchteils des ausgewählten Werts. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, während der Benutzer mit dem Bereich interagiert.

Um Abhebe-Punkte zu einem Bereichs-Steuerelement hinzuzufügen, fügen Sie daslist-Attribut hinzu und geben ihm dieid eines<datalist>-Elements, das eine Reihe von Abhebe-Punkten auf dem Steuerelement definiert. Jeder Punkt wird durch ein<option>-Element mit seinemvalue dargestellt, das auf den Bereichswert gesetzt ist, bei dem eine Markierung gezeichnet werden soll.

HTML

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

Ergebnis

Um Code-Wiederholungen 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" name="temp1" list="values" /></p><p>  <label for="temp2">Temperature for room 2:</label>  <input type="range" name="temp2" list="values" /></p><p>  <label for="temp3">Temperature for room 3:</label>  <input type="range" name="temp3" list="values" /></p><datalist>  <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 Abhebe-Punkte beschriften, indem Sie den<option>-Elementenlabel-Attribute geben. Der Label-Inhalt wird jedoch standardmäßig nicht angezeigt. Sie können CSS verwenden, um die Beschriftungen anzuzeigen und sie korrekt zu positionieren. Hier ist eine Möglichkeit, dies zu tun.

HTML

<label for="tempB">Choose a comfortable temperature:</label><br /><input type="range" name="temp" list="values" /><datalist>  <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 stellen Browser Range-Eingaben als Schieberegler dar, bei denen der Knopf nach links und rechts gleitet.

Um einen vertikalen Bereich zu erstellen, bei dem der Schieberegler nach oben und unten gleitet, setzen Sie diewriting-mode-Eigenschaft auf einen Wert von entwedervertical-rl odervertical-lr:

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

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

Dies bewirkt, dass der Bereichs-Schieberegler vertikal gerendert wird:

Sie können auch dieappearance-Eigenschaft auf den nicht standardmäßigen Wertslider-vertical setzen, wenn Sie ältere Versionen von Chrome und Safari unterstützen möchten, und das nicht standardmäßigeorient="vertical"-Attribut hinzufügen, um ältere Versionen von Firefox zu unterstützen.

Sehen Sie sichErstellen von vertikalen Formularsteuerungen für Beispiele an.

• HTML-Formulare
• <input> und die darauf basierendeHTMLInputElement-Schnittstelle
• <input type="number">
• validityState.rangeOverflow undvalidityState.rangeUnderflow
• Steuerung mehrerer Parameter mit ConstantSourceNode
• Erstellen vertikaler Formularsteuerungen
• Styling des Range-Elements