<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 darauf zurückgreifen und ihn als text-Eingabe behandeln.

Wert

Der Wert eines <input type="range">-Elements wird mit dem value-Attribut festgelegt, das eine Zeichenfolge akzeptiert, die die ausgewählte Zahl darstellt. 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 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 führt ein Versuch, den Wert über das Maximum zu setzen, dazu, dass er auf das Maximum gesetzt wird.

Validierung

Es gibt keine Musterüberprüfung, 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 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

Neben 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, das sich im selben Dokument befindet. Der <datalist> bietet eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. 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 untenstehende Beispiel zum Hinzufügen von Tick-Marken für ein Beispiel, wie die Optionen auf einer Skala in unterstützten Browsern angezeigt werden.

max

Der größte Wert im Bereich der erlaubten Werte. Wenn der in das Element eingegebene value diesen Wert überschreitet, schlägt das Element bei der Einschränkungsüberprüfung 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 kleinste Wert im Bereich der erlaubten Werte. Wenn der value des Elements kleiner ist als dieser Wert, schlägt das Element bei der Einschränkungsüberprüfung fehl. Wenn ein Wert für min angegeben ist, der keine gültige Zahl ist, hat das Eingabefeld 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, an die der Wert halten 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, wenn angegeben, andernfalls value, oder 0, wenn keiner bereitgestellt wird.

Der Standardschrittwert für step-Eingaben ist 1, wodurch nur Ganzzahlen eingegeben werden können—es sei denn, die Schrittbasis ist keine Ganzzahl.

Ein Zeichenfolgenwert von any bedeutet, dass kein Schritt impliziert ist, und jeder Wert ist zulässig (abgesehen von anderen Einschränkungen wie min und max). Siehe das Beispiel Festlegen des Schritts auf den Wert any, um zu sehen, wie dies in unterstützten Browsern funktioniert.

Nicht standardisierte Attribute

orient

Ähnlich der nicht standardisierten CSS-Eigenschaft -moz-orient, die die <progress>- und <meter>-Elemente betrifft, definiert das orient-Attribut die Ausrichtung des Bereichsreglers. Werte sind horizontal, was bedeutet, dass der Bereich horizontal gerendert wird, und vertical, wo der Bereich vertikal gerendert wird.

Beispiele

Während der number-Typ es Benutzern ermöglicht, eine Zahl mit optionalen Einschränkungen einzutragen, die ihren Wert zwischen einem Minimum und einem Maximum erzwingen, erfordert er dennoch, dass sie einen spezifischen Wert eingeben. Der range-Eingabetyp ermöglicht es Ihnen, den Benutzer nach einem Wert zu fragen, in Fällen, in denen der Benutzer sich möglicherweise nicht einmal darum kümmert—oder weiß—welcher spezifische numerische Wert ausgewählt ist.

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

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

In der Regel ist ein Bereichseingabefeld dann eine gute Wahl, wenn der Benutzer eher am Prozentsatz der Entfernung zwischen Mindest- und Höchstwert als an der tatsächlichen Zahl selbst interessiert ist. Zum Beispiel denken Benutzer bei einem Lautstärkeregler eines Heimstereos typischerweise "Lautstärke auf halbem Weg bis zum Maximum einstellen", anstatt "Lautstärke auf 0.5 einstellen".

Festlegen des Minimums und Maximums

Standardmäßig ist das Minimum 0 und das Maximum 100. Wenn das nicht Ihren Wünschen entspricht, können Sie leicht andere Grenzen festlegen, indem Sie die Werte der min- und/oder max-Attribute ä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" />

Festlegen der Granularität des Wertes

Standardmäßig beträgt die Granularität 1, was bedeutet, dass der Wert immer eine Ganzzahl ist. Um die Granularität zu steuern, können Sie das step-Attribut ändern. Zum Beispiel, wenn Sie einen Wert auf halbem Weg 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 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.

Hinzufügen von Tick-Marken

Um Tick-Marken zu einem Bereichssteuerung hinzuzufügen, fügen Sie das list-Attribut hinzu, indem Sie ihm die id eines <datalist>-Elements geben, das eine Reihe von Tick-Marken auf der Steuerung definiert. Jeder Punkt wird mit einem <option>-Element dargestellt, wobei sein value auf den Wert des Bereichs 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

Verwenden derselben Datalist für mehrere Bereichssteuerungen

Um das Wiederholen von Code zu vermeiden, 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 Labels

Sie können Tick-Marken durch das Hinzufügen von label-Attributen zu den <option>-Elementen kennzeichnen. Der Label-Inhalt 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 das 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

Erstellung vertikaler 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 Regler 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 bewirkt, dass der Bereichsregler vertikal gerendert 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 hinzufügen, um ältere Versionen von Firefox zu unterstützen.

Siehe Erstellung vertikaler Formularsteuerungen für Beispiele.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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 vertikaler Formularsteuerungen
• Styling des Bereichselements