<input type="range">

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 zurückfallen und als text Eingabe behandelt.

Wert

Der Wert eines <input type="range"> Elements wird mit dem value Attribut festgelegt, das eine Zeichenkette akzeptiert, die die ausgewählte Zahl darstellt. Der Wert ist niemals eine leere Zeichenkette (""). 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 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. In ähnlicher Weise führt ein Versuch, den Wert über das Maximum festzulegen, dazu, dass er auf das Maximum gesetzt wird.

Validierung

Es gibt keine Musterüberprüfung; jedoch werden die folgenden Formen der automatischen Überprüfung 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 unter einem schlechten Input leidet.
• Der Wert wird nicht kleiner als min sein. Standard ist 0.
• Der Wert wird nicht größer als max sein. Standard ist 100.
• Der Wert wird ein Vielfaches von step sein. Standard ist 1.

Zusätzliche Attribute

Zusätzlich zu den Attributen, die von allen <input> Elementen geteilt werden, bieten Bereichseingaben die folgenden Attribute.

list

Der Wert des list Attributs ist die id eines <datalist> Elements, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste vordefinierter Werte, um dem Benutzer Vorschläge für diese Eingabe zu machen. Alle Werte in der Liste, die mit dem type unvereinbar 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.

Ein Beispiel dafür, wie die Optionen bei einem Bereich in unterstützten Browsern gekennzeichnet werden, finden Sie unten unter Tick-Markierungen hinzufügen.

max

Der größte Wert im Bereich der zulässigen Werte. Wenn der in das Element eingegebene value diesen übersteigt, schlägt das Element Einschrä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 max Attribut.

min

Der kleinste Wert im Bereich der zulässigen Werte. Wenn der value des Elements kleiner ist als dieser, schlägt das Element Einschränkungsvalidierung fehl. Wenn ein Wert für min angegeben wird, der keine gültige Zahl ist, hat die Eingabe keinen Minimalwert.

Dieser Wert muss kleiner oder gleich dem Wert des max Attributs sein. Siehe das HTML min Attribut.

step

Das step Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten ab der Basis sind, sind gültig. Die Schrittbasis ist min, falls angegeben, ansonsten value oder 0, wenn weder noch angegeben ist.

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

Ein Zeichenkettenwert von any bedeutet, dass kein Schritt impliziert wird, und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wie min und max). Siehe das Beispiel Step auf den any Wert einstellen für die Funktionsweise in unterstützten Browsern.

Nicht-Standard-Attribute

orient

Ähnlich der nicht standardisierten CSS-Eigenschaft -moz-orient, die die <progress> und <meter> Elemente beeinflusst, definiert das orient Attribut die Ausrichtung des Bereichsschiebers. Zu den Werten gehören 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 einzugeben, die den Wert zwischen einem Minimum und einem Maximum erzwingen, erfordert er, dass sie einen spezifischen Wert eingeben. Der range Eingabetyp ermöglicht es, den Benutzer nach einem Wert zu fragen, in Fällen, in denen es dem Benutzer möglicherweise egal ist—oder er nicht weiß—welchen spezifischen numerischen Wert er ausgewählt hat.

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

• Audiosteuerungen wie Lautstärke und Balance oder Filtersteuerungen.
• Farbeinstellungskontrollen wie Farbkanäle, Transparenz, Helligkeit usw.
• Spieleinstellungssteuerungen wie Schwierigkeitsgrad, Sichtweite, Weltgröße und so fort.
• Passwortlänge für von einem Passwortmanager generierte Passwörter.

In der Regel ist ein Bereichseingabeelement ein guter Kandidat, wenn der Benutzer eher am Prozentsatz der Distanz zwischen Minimal- und Maximalwerten interessiert ist als am eigentlichen Wert. Zum Beispiel im Fall einer Lautstärkeregelung einer Heimstereoanlage denken Benutzer normalerweise „Lautstärke auf halbem Weg zum Maximum einstellen“ statt „Lautstärke auf 0,5 einstellen“.

Das Minimum und Maximum angeben

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 haben.

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" />

Die Granularität des Wertes einstellen

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 einen Wert zwischen 5 und 10 zur Hälfte brauchen, sollten Sie den Wert von step auf 0,5 setzen:

Das step Attribut setzen

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

Step auf any setzen

Wenn Sie jeden Wert akzeptieren wollen, 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 π zu wählen, ohne Einschränkungen hinsichtlich des Bruchteils des ausgewählten Wertes. JavaScript wird verwendet, um zu zeigen, wie sich der Wert ändert, wenn der Benutzer mit dem Bereich interagiert.

Tick-Markierungen hinzufügen

Um Tick-Markierungen zu einem Bereichselement hinzuzufügen, fügen Sie das list Attribut hinzu und geben ihm die id eines <datalist> Elements, das eine Reihe von Tick-Markierungen auf dem Steuerelement 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

Dieselbe Datalist für mehrere Bereichssteuerungen verwenden

Um zu vermeiden, dass Sie Code wiederholen müssen, 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

Labels hinzufügen

Sie können Tick-Markierungen beschriften, indem Sie den <option> Elementen label Attribute geben. Der Inhalt der Label 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önnen.

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

Vertikale Bereichssteuerungen erstellen

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

Um einen vertikalen Bereich zu erstellen, in dem der Schieberegler nach oben und unten gleitet, setzen Sie die Eigenschaft writing-mode 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 Bereichsschieber vertikal gerendert wird:

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

Siehe Erstellen von vertikalen Formularelementen für Beispiele.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTML-Formularen
• <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
• Gestaltung des Range-Elements