<input type="range">

Probieren Sie es aus

<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 text Eingabe behandelt.

Wert

Der Wert eines <input type="range"> Elements wird mit dem value-Attribut festgelegt, das einen String akzeptiert, der die ausgewählte Zahl darstellt. Der Wert ist niemals ein leerer String (""). Der Standardwert liegt in der Mitte 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 Standardwertes lautet:

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 führt ein Versuch, den Wert über das Maximum zu setzen, dazu, dass er auf das Maximum gesetzt wird.

Validierung

Es gibt keine Musterüberprüfung; jedoch werden folgende automatische Überprüfungen 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 fehlerhaft ist.
• Der Wert darf nicht kleiner als min sein. Der Standard ist 0.
• Der Wert darf nicht größer als max sein. Der Standard ist 100.
• Der Wert muss ein Vielfaches von step sein. Der Standard ist 1.

Zusätzliche Attribute

Neben den Attributen, die alle <input>-Elemente teilen, bieten Bereichseingaben die folgenden Attribute.

list

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

Siehe das Hinzufügen von Markierungen unten für ein Beispiel, wie die Optionen auf einem Bereich in unterstützten Browsern angezeigt werden.

max

Der größte Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebene value diesen überschreitet, schlägt das Element bei der Einschränkungsvalidierung 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 das HTML max-Attribut.

min

Der niedrigste Wert im Bereich der erlaubten Werte. Wenn der value des Elements kleiner als dieser Wert ist, schlägt das Element bei der Einschränkungsvalidierung 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 das HTML min-Attribut.

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Schritt-Basiswert entfernt sind, sind gültig. Der Schritt-Basiswert ist min, falls angegeben, ansonsten value, oder 0, wenn keiner der beiden angegeben ist.

Der Standard-Schrittabstand für step-Eingaben ist 1, was nur die Eingabe von ganzen Zahlen zulässt — es sei denn, der Schritt-Basiswert ist keine ganze Zahl.

Ein String-Wert von any bedeutet, dass kein Schritt impliziert wird, und jeder Wert erlaubt ist (unter Ausschluss anderer Einschränkungen wie min und max). Siehe das Beispiel Step auf den any-Wert setzen, um zu sehen, wie dies in unterstützten Browsern funktioniert.

Nicht-standardmäßige Attribute

orient

Ähnlich der nicht-standardmäßigen CSS-Eigenschaft -moz-orient, die die <progress> und <meter> Elemente betrifft, definiert das orient Attribut die Ausrichtung des Bereichsreglers. Werte sind unter anderem horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, bei dem der Bereich vertikal gerendert wird.

Beispiele

Wohingegen der number-Typ es Benutzern ermöglicht, eine Zahl mit optionalen Einschränkungen einzugeben, die ihren Wert auf ein Minimum und Maximum begrenzen, erfordert er, dass sie einen spezifischen Wert eingeben. Der range-Eingabetyp ermöglicht Ihnen, den Benutzer nach einem Wert zu fragen, wenn dieser möglicherweise gar nicht weiß oder sich nicht darum kümmert, welchen spezifischen numerischen Wert er auswählt.

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

• Audiosteuerungen wie Lautstärke und Balance oder Filterkontrollen.
• Farbeinstellungen wie Farbkanäle, Transparenz, Helligkeit usw.
• Spieleinstellungen wie Schwierigkeitsgrad, Sichtweite, Weltgröße usw.
• Passwortlängen für generierte Passwörter eines Passwort-Managers.

In der Regel ist ein Bereichseingabefeld eine gute Wahl, wenn der Benutzer eher am Prozentsatz der Distanz zwischen Minimal- und Maximalwert interessiert ist als an der tatsächlichen Zahl selbst. Zum Beispiel denken Benutzer im Fall eines Lautstärkereglers eines Heimstereos typischerweise "Stelle die Lautstärke auf halbwegs maximal" anstatt "Stelle die Lautstärke auf 0,5".

Minimum und Maximum angeben

Standardmäßig ist das Minimum 0 und das Maximum 100. Wenn das nicht dem gewünschten entspricht, können Sie problemlos andere Grenzen angeben, indem Sie die Werte der min- und/oder max-Attribute ändern. Diese können beliebige Fließkommawerte sein.

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 des Wertes festlegen

Standardmäßig beträgt die Granularität 1, was bedeutet, dass der Wert immer eine ganze Zahl ist. Um die Granularität zu steuern, können Sie das step-Attribut ändern. Zum Beispiel, wenn Sie einen Wert benötigen, der sich auf halbem Weg zwischen 5 und 10 befindet, sollten Sie den Wert von step auf 0,5 setzen:

Das Attribut Schritt festlegen

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

Schritt 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 erlaubt dem Benutzer, jeden Wert zwischen 0 und π auszuwählen, ohne Einschränkung des Bruchteils des ausgewählten Wertes. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, wenn der Benutzer mit dem Bereich interagiert.

Markierungen hinzufügen

Um einem Bereichs-Steuerelement Markierungen hinzuzufügen, fügen Sie das list-Attribut hinzu und geben Sie ihm die id eines <datalist>-Elements, das eine Reihe von Markierungen auf der Steuerung definiert. Jeder Punkt wird durch ein <option> Element dargestellt, dessen value 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

Verwenden derselben Datalist für mehrere Bereichssteuerungen

Um Ihnen zu helfen, Codewiederholungen 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

Beschriftungen hinzufügen

Sie können Markierungen 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 Labels 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

Vertikale Bereichssteuerungen erstellen

Standardmäßig rendern Browser Bereichseingaben als Schieberegler mit dem Schieber, der sich links und rechts bewegt.

Um einen vertikalen Bereich zu erstellen, bei dem der Regler nach oben und unten bewegt wird, setzen Sie die writing-mode-Eigenschaft mit einem 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-Eigenschaft appearance 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 Attribut orient="vertical" verwenden, um ältere Versionen von Firefox zu unterstützen.

Siehe Erstellen vertikaler Formularelemente für Beispiele.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Formulare
• <input> und die HTMLInputElement Interface, auf der es basiert
• <input type="number">
• validityState.rangeOverflow und validityState.rangeUnderflow
• Steuerung mehrerer Parameter mit ConstantSourceNode
• Erstellen vertikaler Formularelemente
• Stylen des Bereichs-Elements