<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 zurückgesetzt und als text-Eingabe behandelt.

Der Wert eines <input type="range">-Elements wird mit dem value-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 des min-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 der value 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 als min sein. Der Standard ist 0.
• Der Wert wird nicht größer als max sein. Der Standard ist 100.
• Der Wert wird ein Vielfaches von step sein. Der Standard ist 1.

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

Der Wert des list-Attributs ist die id 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 dem type 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 Beispiel Hinzufü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 eingegebene value diesen überschreitet, schlägt das Element bei der Konstraintvalidierung fehl. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen Maximalwert.

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

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

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

Das step-Attribut ist eine Zahl, die die Feinheit angibt, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Step-Basiswert entfernt sind, sind gültig. Die Step-Basis ist min, falls angegeben, ansonsten value, oder 0, wenn keines von beiden angegeben ist.

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

Ein Zeichenfolgenwert von any bedeutet, dass kein Step impliziert ist und jeder Wert erlaubt ist (mit Ausnahme anderer Einschränkungen wie min und max). Siehe das Beispiel Einstellung von Step auf den Wert any, 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 das orient-Attribut die Ausrichtung des Bereichs-Schiebereglers. Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal dargestellt wird, und vertical, wo der Bereich vertikal dargestellt wird.

Während der Typ number 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. Der range-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 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 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 das step-Attribut ändern. Zum Beispiel, wenn Sie einen Wert haben möchten, der auf halbem Wege zwischen 5 und 10 ist, sollten Sie den step-Wert auf 0.5 setzen:

Einstellung des Step-Attributs

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

Step auf any setzen

Wenn Sie jeden Wert akzeptieren möchten, unabhängig davon, wie viele Dezimalstellen er hat, können Sie einen Wert von any für das step-Attribut 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 π 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 das list-Attribut hinzu und geben ihm die id eines <datalist>-Elements, das eine Reihe von Abhebe-Punkten auf dem Steuerelement definiert. Jeder Punkt wird durch ein <option>-Element mit seinem value 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" 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-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" 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 Abhebe-Punkte beschriften, indem Sie den <option>-Elementen label-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" 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 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 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 bewirkt, dass der Bereichs-Schieberegler vertikal gerendert wird:

Sie können auch die 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.

Sehen Sie sich Erstellen von vertikalen Formularsteuerungen für Beispiele an.

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