<input type="range">

Wenn der Browser des Benutzers den Typ range nicht unterstützt, wird er als text-Eingabe behandelt.

Es gibt keine Musterüberprüfung; jedoch werden die folgenden automatischen Überprüfungen 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 eine schlechte Eingabe aufweist.
• 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 enthält. Der Wert ist niemals eine leere Zeichenkette (""). 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 Standardwert auf den Wert des min-Attributs gesetzt. Der Algorithmus zur Bestimmung des Standardwerts 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 wird ein Versuch, den Wert über das Maximum zu setzen, dazu führen, dass er auf das Maximum gesetzt wird.

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

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. 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 inkompatibel sind, werden nicht in die vorgeschlagenen Optionen aufgenommen. Die bereitgestellten Werte sind Vorschläge und keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert angeben.

Siehe das Beispiel zur Hinzufügung von Markierungen weiter unten, um 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 Wert überschreitet, schlägt die Elementvalidierung constraint validation 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. Weitere Informationen siehe das HTML max-Attribut.

Der kleinste Wert im Bereich der erlaubten Werte. Wenn der value des Elements kleiner ist als dieser, schlägt die Elementvalidierung constraint validation fehl. 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. Weitere Informationen siehe das HTML min-Attribut.

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, ansonsten value oder ein entsprechender Standardwert, wenn keiner dieser Werte angegeben ist), sind zulässig.

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

Der Standardschrittwert für Bereichseingaben ist 1, der nur ganze Zahlen zulässt, es sei denn, die Schrittbasis ist keine ganze Zahl; Wenn Sie z. B. min auf -10 und value auf 1.5 setzen, 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 der nicht standardmäßigen CSS-Eigenschaft -moz-orient, die die Elemente <progress> und <meter> betrifft, definiert das orient-Attribut die Ausrichtung des Bereichsschiebereglers. Die Werte umfassen horizontal, was bedeutet, dass der Bereich horizontal dargestellt wird, und vertical, wo der Bereich vertikal dargestellt wird.

Während der number-Typ es den Benutzern ermöglicht, eine Zahl mit optionalen Einschränkungen einzugeben, die ihren Wert zwischen einem Mindest- und einem Höchstwert erzwingen, erfordert er, dass sie einen spezifischen Wert eingeben. Der range-Eingabetyp ermöglicht es Ihnen, den Benutzer nach einem Wert zu fragen, falls dem Benutzer der spezifische numerische Wert, der ausgewählt wurde, möglicherweise nicht einmal wichtig ist oder bekannt ist.

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

• Audio-Steuerelemente wie Lautstärke und Balance oder Filter-Steuerelemente.
• Farbkonfigurationssteuerungen wie Farbkanäle, Transparenz, Helligkeit usw.
• Spielkonfigurationen wie Schwierigkeitsgrad, Sichtweite, Weltengröße usw.
• Passwortlänge für generierte Passwörter eines Passwortmanagers.

Im Allgemeinen, wenn der Benutzer eher am Prozentsatz der Entfernung zwischen Mindest- und Höchstwerten interessiert ist als an der tatsächlichen Zahl selbst, ist ein Bereichseingang eine gute Wahl. Beispielsweise denkt ein Benutzer einer Heim-Stereoanlage typischerweise "Lautstärke auf halbem Wege zum Maximum einstellen" anstatt "Lautstärke auf 0,5 einstellen".

Standardmäßig beträgt das Minimum 0 und das Maximum 100. Wenn dies nicht das ist, was Sie wollen, können Sie leicht unterschiedliche Grenzen angeben, indem Sie die Werte der min- und/oder max-Attribute ändern. Diese können jeden Gleitkommawert enthalten.

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 Granularität 1, was bedeutet, dass der Wert immer eine ganze Zahl ist. Um die Granularität zu kontrollieren, können Sie das step-Attribut ändern. Zum Beispiel, wenn Sie einen Wert benötigen, der 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" />

Festlegen von Schritt auf any

Wenn Sie jeden Wert akzeptieren möchten, unabhängig davon, wie viele Dezimalstellen er hat, 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 Beschränkung auf den Bruchteil des gewählten Wertes. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, wenn der Benutzer mit dem Bereich interagiert.

Um Markierungen zu einem Bereichssteuerung hinzuzufügen, schließen Sie das list-Attribut ein, wobei es die id eines <datalist>-Elements erhält, das eine Reihe von Markierungen auf der Steuerung definiert. Jeder Punkt wird mit einem <option>-Element dargestellt, dessen value auf den Bereichswert eingestellt 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 Ihnen zu helfen, nicht immer wieder denselben 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 Markierungen beschriften, indem Sie den <option>-Elementen label-Attribute geben. Der Inhalt der Beschriftung 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, 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 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 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 Bereichsschieberegler vertikal gerendert:

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 standardmäßige orient="vertical"-Attribut einfügen, um ältere Versionen von Firefox zu unterstützen.

Weitere Informationen und Beispiele finden Sie unter Erstellen vertikaler Formularelemente.

• HTML-Formulare
• <input> und die darauf basierende HTMLInputElement-Schnittstelle
• <input type="number">
• validityState.rangeOverflow und validityState.rangeUnderflow
• Steuerung mehrerer Parameter mit ConstantSourceNode
• Erstellen vertikaler Formularelemente
• Styling des range-Elements
• Kompatibilität von CSS-Eigenschaften