<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 eine Rückfallebene eingesetzt, die ihn wie eine text Eingabe behandelt.

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

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

Das value Attribut enthält eine Zeichenkette, die eine Zeichenkettendarstellung der ausgewählten Zahl darstellt. Der Wert ist niemals eine leere Zeichenkette (""). 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 dem Fall wird der Standardwert 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 einzustellen, 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.

Zusätzlich zu den von allen <input> Elementen geteilten Attributen bieten Range-Eingaben die folgenden Attribute.

Der Wert des list Attributs ist die id eines <datalist> Elements, das sich im selben Dokument befindet. Das <datalist> liefert eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Wertvorgaben, die mit dem type nicht 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 untenstehende Beispiel zum Hinzufügen von Markierungen, um zu sehen, wie Optionen bei einer Range in unterstützten Browsern angezeigt werden.

Der größte Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebene value diesen übersteigt, scheitert das Element an der Constraint-Validierung. Wenn der Wert des max Attributs keine Zahl ist, dann hat das Element keinen Höchstwert.

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

Der kleinste Wert im Bereich der zulässigen Werte. Wenn der value des Elements weniger als dies beträgt, scheitert das Element an der Constraint-Validierung. Wenn ein Wert für min angegeben ist, der keine gültige Zahl ist, hat die Eingabe keinen Mindestwert.

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

Das step Attribut ist eine Zahl, die die Feinheit festlegt, der der Wert entsprechen muss. Nur Werte, die dem angegebenen Schrittintervall entsprechen (min falls angegeben, value andernfalls, oder ein entsprechender Standardwert, wenn keiner von diesen angegeben ist), sind gültig.

Das step Attribut kann auch auf den any Zeichenkettenwert gesetzt werden. Dieser step Wert bedeutet, dass kein Schrittintervall impliziert wird und jeder Wert im angegebenen Bereich zulässig ist (vorbehaltlich anderer Einschränkungen, wie min und max). Siehe das Beispiel Setzen von step auf den any Wert, um zu sehen, wie dies in unterstützten Browsern funktioniert.

Der Standardwert für Schritte bei range Eingaben ist 1, sodass nur ganze Zahlen eingegeben werden können, es sei denn, die Basisschritte sind keine ganze Zahl; beispielsweise, 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 wie die nicht standardisierte CSS-Eigenschaft -moz-orient, die die <progress> und <meter> Elemente beeinflusst, definiert das orient Attribut die Ausrichtung des Range-Schiebereglers. Zu den Werten gehören horizontal, was bedeutet, dass die Range horizontal gerendert wird, und vertical, wo die Range 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 Maximum erzwingen, erfordert er, dass sie einen spezifischen Wert eingeben. Der range Eingabetyp erlaubt es Ihnen, den Benutzer nach einem Wert zu fragen, in Fällen, in denen es dem Benutzer möglicherweise egal ist – oder er nicht weiß – welcher spezifische numerische Wert ausgewählt ist.

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

• Audiosteuerungen wie Lautstärke und Balance oder Filtersteuerungen.
• Farbeinstellungen wie Farbkanäle, Transparenz, Helligkeit usw.
• Spieleinstellungen wie Schwierigkeit, Sichtbarkeitsabstand, Weltengröße usw.
• Passwortlänge für die von einem Passwortmanager generierten Passwörter.

Generell gilt: Wenn der Benutzer eher am prozentualen Abstand zwischen den Minimal- und Maximalwerten interessiert ist als an der tatsächlichen Zahl, ist eine Range-Eingabe ausgezeichnet geeignet. Zum Beispiel denkt man bei der Lautstärkeregelung eines Heim-Stereosystems typischerweise an "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 dem entspricht, was Sie möchten, 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:

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

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 step Attribut festlegen

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

Schritt auf any setzen

Wenn Sie jeden Wert unabhängig von der Anzahl der Dezimalstellen akzeptieren möchten, können Sie für das step Attribut einen Wert von 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 π auszuwählen, ohne Einschränkungen bei dem Bruchteil des ausgewählten Wertes. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, während der Benutzer mit dem Range interagiert.

Um Markierungen zu einer Range-Steuerung 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 mit einem <option> Element dargestellt, dessen value auf den Wert der Range 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 Ihnen das Wiederholen von Code zu ersparen, 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 beschriften, indem Sie den <option> Elementen label Attribute hinzufügen. Der Inhalt des Labels 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 Range-Eingaben als Schieberegler, bei denen der Knopf nach links und rechts gleitet.

Um eine vertikale Range zu erstellen, bei der der Knopf nach oben und unten gleitet, 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;
}

Dadurch wird der Range-Schieberegler vertikal dargestellt:

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 von vertikalen Formularsteuerelementen für Beispiele.

• HTML-Formulare
• <input> und die HTMLInputElement Schnittstelle, auf der es basiert
• <input type="number">
• validityState.rangeOverflow und validityState.rangeUnderflow
• Steuerung mehrerer Parameter mit ConstantSourceNode
• Erstellen von vertikalen Formularsteuerelementen
• Stylen des Range-Elements