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

Es steht keine Musterüberprüfung zur Verfügung; jedoch werden die folgenden automatischen Validierungen durchgeführt:

• Wenn der value auf etwas gesetzt ist, das nicht in eine gültige Gleitkommazahl konvertiert werden kann, schlägt die Validierung fehl, da die Eingabe einen fehlerhaften Wert hat.
• 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 des step sein. Der Standardwert ist 1.

Das Attribut value enthält eine Zeichenkette, die eine Zeichenfolgenrepräsentation der ausgewählten Zahl enthält. Der Wert ist niemals eine leere Zeichenfolge (""). 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 Standardwert auf den 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. Ähnlich wird er, wenn versucht wird, den Wert höher als das Maximum zu setzen, auf das Maximum gesetzt.

Zusätzlich zu den Attributen, die allen <input>-Elementen gemeinsam sind, bieten Range-Eingaben die folgenden Attribute.

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

Siehe unten das Beispiel für das Hinzufügen von Markierungen, um zu sehen, wie die Optionen auf einem 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 überschreitet, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn der Wert des max-Attributs keine Zahl ist, hat das Element keinen maximalen Wert.

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 die Einschränkungsvalidierung des Elements fehl. Wenn ein Wert für min angegeben wird, der keine gültige Zahl ist, hat die Eingabe keinen minimalen Wert.

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, der der Wert entsprechen muss. Nur Werte, die dem angegebenen Schrittintervall entsprechen (min falls angegeben, value andernfalls oder einem geeigneten Standardwert, falls keiner davon angegeben ist) sind gültig.

Das step-Attribut kann auch auf den any-Stringwert gesetzt werden. Dieser step-Wert bedeutet, dass kein Schrittintervall impliziert ist und jeder Wert innerhalb des angegebenen Bereichs erlaubt 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 Standard-Schrittwert für range-Eingaben ist 1, wodurch nur ganze Zahlen eingegeben werden können, es sei denn, die Schrittgrundlage ist 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 positive Richtung und -0.5, -1.5, -2.5,… in negative Richtung. Siehe das HTML-Attribut step.

Ä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. Die Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird.

Während der number-Typ es den Benutzern ermöglicht, eine Zahl mit optionalen Einschränkungen einzugeben, die den Wert zwischen einem Minimum und einem Maximum erzwingen, erfordert er, dass sie einen spezifischen Wert eingeben. Der range-Eingabetyp ermöglicht es Ihnen, den Benutzer um einen Wert zu bitten, wenn der Benutzer möglicherweise nicht einmal weiß oder sich darum kümmert, welchen spezifischen numerischen Wert er auswählt.

Einige Beispiele, 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 Schwierigkeitsgrad, Sichtweite, Weltgröße usw.
• Passwortlänge für die von einem Passwort-Manager generierten Passwörter.

Als Regel gilt: Wenn der Benutzer eher am Prozentsatz der Entfernung zwischen Mindest- und Höchstwerten interessiert ist als am tatsächlichen Wert selbst, ist eine Range-Eingabe eine gute Wahl. Zum Beispiel denken Benutzer im Fall eines Heimlautstärkereglers typischerweise "Stellen Sie die Lautstärke auf die Hälfte des Maximums" anstatt "Stellen Sie die Lautstärke auf 0,5".

Standardmäßig beträgt das Minimum 0 und das Maximum 100. Wenn das nicht gewünscht ist, können Sie leicht andere Grenzen festlegen, indem Sie die Werte der Attribute min und/oder max ändern. Diese können beliebige Gleitkommawerte sein.

Um beispielsweise den Benutzer um einen Wert zwischen -10 und 10 zu bitten, können Sie verwenden:

<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 Attribut step ändern. Wenn Sie beispielsweise einen Wert benötigen, der auf halbem Weg zwischen 5 und 10 liegt, sollten Sie den Wert von step auf 0,5 setzen:

Festlegen des step-Attributs

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

Setzen von step auf any

Wenn Sie jeden Wert unabhängig von der Anzahl der Dezimalstellen, auf die er erweitert wird, akzeptieren möchten, können Sie für das Attribut step 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 lässt den Benutzer jeden Wert zwischen 0 und π ohne Einschränkung bezüglich des Bruchteils des ausgewählten Werts auswählen. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, wenn der Benutzer mit dem Range interagiert.

Um einem Range-Steuerelement Markierungen hinzuzufügen, schließen Sie das list-Attribut ein und geben ihm die id eines <datalist>-Elements, das eine Reihe von Markierungen auf dem Steuerelement definiert. Jeder Punkt wird durch ein <option>-Element dargestellt, dessen value auf den Wert des Bereichs gesetzt wird, 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 sich das Wiederholen von Code zu ersparen, können Sie denselben <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 durch Hinzufügen von label-Attributen zu den <option>-Elementen beschriften. 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 die Range-Eingaben als Slider, bei denen der Knopf von links nach rechts verschoben wird.

Um einen vertikalen Range zu erstellen, bei dem der Knopf 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 Range-Slider vertikal gerendert wird:

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

Siehe Erstellen von vertikalen Steuerelementen für Beispiele.

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