<input type="range"> HTML-Attributwert

Probieren Sie es aus

<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 auf text zurückgesetzt und als solcher behandelt.

Wert

Der Wert eines <input type="range">-Elements wird über das value-Attribut festgelegt, das eine Zeichenfolge akzeptiert, die die ausgewählte Zahl repräsentiert. Der Wert ist niemals eine leere Zeichenfolge (""). Der Standardwert befindet sich genau in der Mitte zwischen dem festgelegten 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 niedriger als das Minimum einzustellen, wird er auf das Minimum gesetzt. Ebenso führt ein Versuch, den Wert höher als das Maximum einzustellen, dazu, dass er auf das Maximum gesetzt wird.

Validierung

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

• Wenn der value-Wert auf etwas gesetzt ist, 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 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.

Zusätzliche Attribute

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

list

Der Wert des list-Attributs ist die id eines <datalist>-Elements im selben Dokument. Die <datalist> liefert eine Liste vorgegebener 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 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 Beispiel zum Hinzufügen von Markierungen unten, wie die Optionen auf einem Bereich in unterstützten Browsern angezeigt werden.

max

Der größte Wert im Bereich der zulässigen Werte. Wenn der value-Wert, der in das Element eingegeben wird, diesen überschreitet, schlägt das Element bei der Beschränkungsvalidierung 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. Siehe das HTML-Attribut max.

min

Der niedrigste Wert im Bereich der zulässigen Werte. Wenn der value-Wert des Elements niedriger als dieser ist, schlägt das Element bei der Beschrä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-Attribut min.

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die ein ganzzahliges Vielfaches der Schrittbasis sind, sind gültig. Die Schrittbasis ist min, falls angegeben, sonst value oder 0, wenn keines angegeben ist.

Der standardmäßige Schrittwert für step-Eingaben ist 1, sodass nur ganze Zahlen eingegeben werden können – es sei denn, die Schrittbasis ist keine ganze Zahl.

Ein Zeichenfolgenwert von any bedeutet, dass keine Schrittweises Eingeben impliziert wird und jeder Wert erlaubt ist (mit Ausnahme anderer Einschränkungen wie min und max). Siehe das Beispiel Schritt auf den any-Wert setzen, um zu sehen, wie dies in unterstützten Browsern funktioniert.

Nicht-standardisierte Attribute

orient

Ähnlich wie bei der nicht standardisierten -moz-orient CSS-Eigenschaft, die sich auf die <progress>- und <meter>-Elemente auswirkt, definiert das orient-Attribut die Ausrichtung des Bereichsreglers. Zu den Werten gehören horizontal, was bedeutet, dass der Bereich horizontal dargestellt wird, und vertical, wo der Bereich vertikal dargestellt wird.

Beispiele

Während der number-Typ den Benutzern erlaubt, eine Zahl mit optionalen Einschränkungen einzugeben, die ihren Wert auf ein Minimum und Maximum begrenzen müssen, erfordert er, dass sie einen spezifischen Wert eingeben. Der range-Eingabetyp erlaubt Ihnen, den Benutzer nach einem Wert zu fragen, in Fällen, wo der Benutzer vielleicht nicht einmal interessiert – oder sich dessen bewusst – ist, welchen spezifischen Zahlenwert er ausgewählt hat.

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

• Audiosteuerungen wie Lautstärke und Balance oder Filtersteuerungen.
• Farbkonfigurationseinstellungen wie Farbkanäle, Transparenz, Helligkeit usw.
• Spieleinstellungen wie Schwierigkeitsgrad, Sichtweite, Weltgröße usw.
• Passwortlänge für generierte Passwörter eines Passwortmanagers.

Grundsätzlich, wenn der Benutzer eher an dem Prozentsatz der Entfernung zwischen Mindest- und Maximalwerten interessiert ist als an der tatsächlichen Zahl selbst, ist eine Bereichseingabe eine großartige Wahl. Beispielsweise denkt ein Benutzer bei der Lautstärkeregler eines Heimstereos typischerweise "stellt die Lautstärke auf die Hälfte des Maximums" ein, anstatt "stellt die Lautstärke auf 0,5" ein.

Festlegen des Minimums und Maximums

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

Zum Beispiel, um den Benutzer nach einem Wert zwischen -10 und 10 zu fragen, können Sie Folgendes verwenden:

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

Einstellen der Wertgranularität

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. Zum Beispiel, wenn Sie einen Wert benötigen, der sich in der Mitte zwischen 5 und 10 befindet, sollten Sie den Wert von step auf 0,5 setzen:

Festlegen des step-Attributs

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

Einstellen von step auf any

Wenn Sie jeden Wert unabhängig davon akzeptieren möchten, wie viele Dezimalstellen er umfasst, können Sie für das step-Attribut 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 im Bruchteil des ausgewählten Wertes auswählen. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, während der Benutzer mit dem Bereich interagiert.

Hinzufügen von Markierungen

Um Markierungen zu einer Bereichssteuerung hinzuzufügen, schließen Sie das list-Attribut ein 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, 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

Verwenden derselben Datalist für mehrere Bereichssteuerungen

Um den Code nicht 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

Hinzufügen von Etiketten

Sie können Markierungen etikettieren, indem Sie den <option>-Elementen label-Attribute geben. 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

Erstellen von vertikalen Bereichssteuerungen

Standardmäßig rendern Browser Bereichseingaben als Schieberegler, bei denen der Knopf nach links und rechts gleitet.

Um einen vertikalen Bereich zu erstellen, in dem der Schieberegler 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 CSS-appearance-Eigenschaft auf den nicht standardisierten Wert slider-vertical setzen, wenn Sie ältere Versionen von Chrome und Safari unterstützen möchten, und das nicht standardisierte orient="vertical"-Attribut hinzufügen, um ältere Versionen von Firefox zu unterstützen.

Siehe Erstellen von vertikalen Formularsteuerungen für Beispiele.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Formulare
• <input> und das HTMLInputElement-Interface, auf dem es basiert
• <input type="number">
• validityState.rangeOverflow und validityState.rangeUnderflow
• Steuern mehrerer Parameter mit ConstantSourceNode
• Erstellen vertikaler Formularsteuerungen
• Styling des Bereichselements