HTML Range-Slider: min, max, step, Live-Anzeige und Zurücksetzen

HTML-Referenz

Erstellt 2026-10-30 Zuletzt geändert 2026-10-30

HTML input type="range" wählt eine Zahl innerhalb eines definierten Bereichs mithilfe eines Reglers aus. Legen Sie seine Grenzen und Intervalle mit min, max und step fest sowie seinen Anfangswert mit value. Es eignet sich für relative Anpassungen wie Lautstärke oder Helligkeit; verwenden Sie ein separates Ausgabeelement und JavaScript, um die aktuelle Zahl anzuzeigen.

Verstehen Sie den Bereich und die Standardwerte

Attribut	Rolle	Standardverhalten
`min`	Minimum	Standard ist 0, wenn weggelassen.
`max`	Maximum	Standard ist 100. Legen Sie es größer als das Minimum fest für einen brauchbaren Einstellbereich.
`step`	Intervall zwischen gültigen Werten	Der Standardwert ist 1. Dezimale Intervalle und `any` sind ebenfalls möglich.
`value`	Erstauswahl	Wenn weggelassen, basiert sie auf dem Mittelpunkt und wird bei Bedarf an den Schritt angepasst. Im Standardbereich ist es 50.
`name`	Feldname in Formulardaten	Geben Sie der Eingabe einen Namen, um ihren Wert zu übermitteln.

Eine Bereichseingabe hat keinen leeren Wert. Das Weglassen des Wertes bedeutet nicht „noch nicht ausgewählt“ und required gilt nicht. Wenn es wichtig ist, ob eine Umfrageauswahl explizit getroffen wurde, ziehen Sie explizite Auswahlmöglichkeiten oder eine andere Eingabemethode in Betracht.

Schritte werden von einer Basis aus berechnet. Beispielsweise erlaubt min="16" max="32" step="2" 16, 18, 20 bis 32. Browser können einen anfänglichen Wert außerhalb des Bereichs oder der Schritte normalisieren, stellen Sie daher sicher, dass der tatsächliche aktuelle Wert Ihrem beabsichtigten Standardwert entspricht.

Vollständiges Beispiel: Schriftgröße live ändern

Speichern Sie diesen Code als range.html und öffnen Sie ihn in einem Browser. Kein Server oder keine Bibliothek wird benötigt. Der Schieberegler ändert die Schriftgröße eines Beispielsatzes von 16 auf 32 px in 2-px-Schritten, und beim Absenden werden die tatsächlichen Formulardaten angezeigt, anstatt sie zu senden.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Schriftgröße mit range ändern</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin-bottom: 12px; }
    input[type="range"] { width: 20rem; max-width: 100%; accent-color: #1769aa; }
    #preview { overflow-wrap: anywhere; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Schriftgröße ändern</h1>
  <form id="demo">
    <label for="fontSize">Beispielschriftgröße (16–32 px, Schritte von 2 px)</label>
    <input id="fontSize" name="fontSize" type="range"
      min="16" max="32" step="2" value="20">
    <p>Aktuelle Größe: <output id="selected" for="fontSize">20</output>px</p>
    <p><button type="submit">Formularwerte anzeigen</button>
      <button type="reset">Zurücksetzen</button></p>
  </form>
  <p id="preview">Wenn Sie den Regler bewegen, ändert sich die Schriftgröße dieses Satzes.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const slider = document.querySelector('#fontSize');
    const selected = document.querySelector('#selected');
    const preview = document.querySelector('#preview');
    const result = document.querySelector('#result');
    function update() {
      selected.value = slider.value;
      preview.style.fontSize = `${slider.valueAsNumber}px`;
      result.textContent = '';
    }
    slider.addEventListener('input', update);
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => {
      requestAnimationFrame(update);
    });
    update();
  </script>
</body>
</html>

Anfangs ist die angezeigte Größe 20 px und die Vorschau verwendet diese Größe. Senden Sie das Formular, um die Zeichenfolge "20" unter dem Namen fontSize zu sehen.
Bewegen Sie den Schieberegler mit einem Zeiger und überprüfen Sie, dass sich die Zahl und die Schriftgröße zusammen ändern. Verwenden Sie Tab, um ihn zu erreichen, und probieren Sie auch die Pfeiltasten aus.
Zum Beispiel ändert ein Schritt mit der rechten Pfeiltaste 20 auf 22: die Anzeige wird 22 und die Schriftgröße 22 px. Beim Absenden wird nun "22" angezeigt.
Zurücksetzen setzt den Schieberegler, die Zahl und die Vorschaugröße auf 20 zurück. Der Reset-Handler plant das Update für den nächsten Frame, sodass er den Wert liest, nachdem der native Reset wirksam geworden ist.

Das Beispiel verwendet input für sofortige Aktualisierungen während der Anpassung. Für die Verarbeitung einer abgeschlossenen Anpassung kommt change infrage. Die Ereignisse unterscheiden sich in Zeitpunkt und Zweck; wählen Sie danach, ob eine Live-Vorschau benötigt wird.

Unterscheiden Sie aktuelle, übermittelte und anfängliche Werte.

slider.value ist die aktuelle Zahl als Zeichenkette; slider.valueAsNumber ist numerisch. Das HTML-Value-Attribut ist der Anfangswert: Das Bewegen des Schiebereglers ändert diese Attributzeichenkette nicht. Lesen Sie den aktuellen Wert des Elements, um ihn anzuzeigen oder zu speichern.

output zeigt ein berechnetes oder ausgewähltes Ergebnis an; es ersetzt kein übermitteltes Formularfeld. Im Beispiel wird der benannte Bereich input übermittelt. Für die reale Serverspeicherung sind ein bestehender Pfad und die Anforderungsverarbeitung sowie serverseitige Bereichs- und Schrittvalidierung erforderlich.

Wählen Sie zwischen Bereich und Zahl und prüfen Sie die Anzeige.

Wenn Benutzer eine genaue Menge, einen Betrag oder eine Länge eingeben müssen, ziehen Sie die Einstellungen für Bereich und Schrittweite bei number in Betracht. Mit Schiebereglern kann man schnell ein ungefähr entsprechendes Niveau einstellen, aber die Auswahl einer genauen Zahl kann auf schmalen Bildschirmen schwierig sein. Wenn Präzision erforderlich ist, kann ein synchronisiertes numerisches Eingabefeld den Schieberegler begleiten.

accent-color kann die Akzentfarbe des nativen Sliders ändern. Es färbt nicht zwingend jeden Teil identisch, und das Erscheinungsbild variiert je nach Browser und Betriebssystem. Überprüfen Sie die Mobilbreite, ausreichenden Interaktionsbereich, Beschriftungszuordnung, Tastaturfokus und die numerische Anzeige zusammen.

Die MDN-Referenz zum range-Input beschreibt Standardwerte und die Unterstützung der Attribute.

HTML-Referenz