<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 Nutzers den Typ range nicht unterstützt, wird er auf das text-Eingabefeld zurückgreifen.

Der Wert eines <input type="range">-Elements wird über das value-Attribut festgelegt, das einen String akzeptiert, der 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; es werden jedoch die folgenden Formen der automatischen Validierung durchgeführt:

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

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

Der Wert des list-Attributs ist der id eines <datalist>-Elements, das im selben Dokument vorhanden ist. Die <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 berücksichtigt. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Für ein Beispiel, wie die Optionen in einem Bereich in unterstützten Browsern angezeigt werden, siehe Hinzufügen von Markierungen unten.

Der größte Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebene value diesen überschreitet, schlägt das Element die Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs keine Zahl ist, 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 kleiner als dieser ist, schlägt das Element die Einschränkungsvalidierung fehl. Wenn ein Wert für min angegeben wird, 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 Granularität angibt, die der Wert einhalten muss. Nur Werte, die dem angegebenen Schrittintervall entsprechen (min, falls angegeben, value andernfalls oder einer geeigneten Standardeinstellung, wenn keines davon angegeben wurde), sind gültig.

Das step-Attribut kann auch auf den Stringwert any gesetzt werden. Dieser step-Wert bedeutet, dass kein Schrittintervall impliziert wird und jeder Wert im angegebenen Bereich erlaubt ist (abzüglich anderer Einschränkungen, wie min und max). Siehe das Beispiel Schritt auf den any-Wert setzen dafür, wie dies in unterstützten Browsern funktioniert.

Der Standard-Schrittwert für range-Eingaben beträgt 1, was nur ganze Zahlen zulässt, es sei denn, die Schrittbasis ist keine ganze Zahl; zum Beispiel, wenn Sie min auf -10 und value auf 1.5 setzen, dann lässt 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 zu. 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 Bereichsreglers. Zu den Werten gehören horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird.

Während der number-Eingabetyp es 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 lässt Sie den Benutzer nach einem Wert fragen, in Fällen, in denen es dem Benutzer egal sein könnte – oder er nicht wissen könnte – was der tatsächlich ausgewählte numerische Wert ist.

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

• Audio-Steuerelemente wie Lautstärke und Balance oder Filter-Steuerelemente.
• Farbdimensionierungskontrollen wie Farbkanäle, Transparenz, Helligkeit usw.
• Spielkonfigurationen wie Schwierigkeitsgrad, Sichtweite, Weltgröße und so weiter.
• Passwortlänge für generierte Passwörter in Passwortmanager.

Als Regel gilt: Wenn für den Benutzer der prozentuale Abstand zwischen Minimum und Maximum wichtiger ist als die tatsächliche Zahl selbst, ist ein Bereichseingabefeld eine gute Wahl. Zum Beispiel bei einer Lautstärkeregelung für ein Heim-Stereo-System denken Benutzer typischerweise "Stelle die Lautstärke auf die Hälfte der maximalen Lautstärke ein" anstatt "Stelle die Lautstärke auf 0,5".

Standardmäßig ist das Minimum 0 und das Maximum 100. Wenn dies nicht das ist, was Sie möchten, können Sie leicht unterschiedliche 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 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 step-Attribut ändern. Zum Beispiel, wenn Sie benötigen, dass ein Wert zwischen 5 und 10 in der Mitte liegt, sollten Sie den Wert von step auf 0,5 setzen:

Das step-Attribut einstellen

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

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

Um Tick-Markierungen zu einer Bereichskontrolle hinzuzufügen, fügen Sie das list-Attribut hinzu und geben ihm die id eines <datalist>-Elements, das eine Reihe von Tick-Markierungen auf der Steuerung definiert. Jeder Punkt wird mit einem <option>-Element dargestellt, dessen value auf den Wert des Bereichs 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 zu helfen, Code zu wiederholen, 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 Tick-Markierungen mit label-Attributen für die <option>-Elemente versehen. Der Labelinhalt wird jedoch standardmäßig nicht angezeigt. Sie können CSS verwenden, um die Labels anzuzeigen und 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 Bereichseingaben als Schieberegler, bei denen der Schieberegler links und rechts bewegt wird.

Um einen vertikalen Bereich zu erstellen, in dem der Schieberegler 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;
}

Dies führt dazu, dass der Bereichsregler vertikal dargestellt wird:

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

Siehe Erstellen von vertikalen Formularelementen 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 Formularelementen
• Stylen des Bereichselements