<input type="range">

Wenn der Browser des Benutzers den Typ range nicht unterstützt, fällt er zurück und behandelt ihn als text Eingabe.

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

• Wenn der value auf etwas gesetzt ist, das nicht in eine gültige Gleitkommazahl umgewandelt werden kann, schlägt die Validierung fehl, weil die Eingabe einen ungültigen Wert enthält.
• 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 Attribut value enthält einen String, der eine stringbasierte Darstellung der ausgewählten Zahl enthält. 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 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 zu setzen, wird er auf das Minimum gesetzt. Ebenso wird ein Versuch, den Wert höher als 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 Range-Eingaben die folgenden Attribute.

Der Wert des list Attributs ist die id eines <datalist> Elements, das sich im selben Dokument befindet. Der <datalist> bietet eine Liste von vordefinierten Werten zur Vorschlag an den Benutzer für diese Eingabe. Alle Werte in der Liste, die mit dem type nicht kompatibel sind, werden nicht in den 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.

Sehen Sie sich das Hinzufügen von Markierungen unten für ein Beispiel an, wie die Optionen auf einem Bereich in unterstützten Browsern gekennzeichnet werden.

Der größte Wert im Bereich der zulässigen 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 als 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 bei der 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 als oder gleich dem Wert des max Attributs sein. 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, value andernfalls, oder ein entsprechender Standardwert, falls keiner dieser Werte angegeben ist), 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 Setting step to the any value, um zu sehen, wie dies in unterstützten Browsern funktioniert.

Der Standard-Schrittwert für range Eingaben ist 1, der nur Ganzzahlen zulässt, es sei denn, die Basis ist keine Ganzzahl; zum Beispiel, 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 der negativen 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 Bereichsschiebereglers. 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 Benutzern erlaubt, 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 um einen Wert zu bitten, in Fällen, in denen der Benutzer möglicherweise nicht einmal daran interessiert ist oder weiß, welcher spezifische numerische Wert ausgewählt wird.

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

• Audiosteuerungen wie Lautstärke und Balance oder Filtersteuerungen.
• Farbkonfigurationselemente wie Farbkanäle, Transparenz, Helligkeit usw.
• Spielkonfigurationselemente wie Schwierigkeit, Sichtweite, Weltgröße und so weiter.
• Passwortlänge für ein von einem Passwortmanager generiertes Passwort.

Als Faustregel gilt: Wenn der Benutzer wahrscheinlich mehr an dem Prozentsatz der Distanz zwischen minimalen und maximalen Werten als an der eigentlichen Zahl selbst interessiert ist, ist eine Range-Eingabe ein hervorragender Kandidat. Zum Beispiel denken Benutzer bei einer Lautstärkeregelung eines Heimkinos für gewöhnlich "setze die Lautstärke auf die Hälfte des Maximums" anstatt "setze die Lautstärke auf 0,5".

Standardmäßig ist das Minimum 0 und das Maximum 100. Wenn das nicht das ist, was Sie möchten, können Sie problemlos andere Grenzen festlegen, indem Sie die Werte der min und/oder max Attribute ändern. Diese können beliebige Fließkommawerte sein.

Zum Beispiel, um den Benutzer um einen Wert zwischen -10 und 10 zu bitten, 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 steuern, können Sie das step Attribut ändern. Zum Beispiel, wenn Sie einen Wert genau zwischen 5 und 10 benötigen, sollten Sie den Wert von step auf 0.5 setzen:

Festlegen des step Attributs

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

Schritt auf any setzen

Wenn Sie jeden Wert unabhängig davon akzeptieren möchten, 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 zu wählen. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, wenn der Benutzer mit dem Bereich interagiert.

Um Markierungen zu einer Bereichssteuerung hinzuzufügen, fügen Sie das list Attribut hinzu und geben ihm die id eines <datalist> Elements, das eine Reihe von Markierungen auf der Steuerung definiert. Jeder Punkt wird durch ein <option> Element dargestellt, mit seinem value auf den Wert des Bereichs gesetzt, 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 zu vermeiden, Code zu wiederholen, 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 beschriften, indem Sie den <option> Elementen label Attribute geben. Allerdings wird der Beschriftungsinhalt 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 rendert der Browser Bereichseingaben als Schieberegler, bei denen der Schalter nach links und rechts gleitet.

Um einen vertikalen Bereich zu erstellen, in dem der Schalter 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 Bereichsschieberegler vertikal dargestellt wird:

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

Siehe Creating vertical form controls für Beispiele.

• HTML Forms
• <input> und die HTMLInputElement Schnittstelle, auf der es basiert
• <input type="number">
• validityState.rangeOverflow und validityState.rangeUnderflow
• Steuern mehrerer Parameter mit ConstantSourceNode
• Erstellen vertikaler Formularelemente
• Styling des range-Elements