Schieberegler mit gefüllter Spur, Wert-Bubble und Skalenstrichen – in allen Browsern gleich dargestellt.

In Bootstrap 6 ist Range keine reine CSS-Klasse mehr, sondern eine kleine JavaScript-Komponente. Sie liest den Wert des nativen Range-Inputs aus und stellt ihn dem CSS als Custom Property zur Verfügung. Dadurch werden Füllung, Wertanzeige und Skala möglich.

• Neue Struktur: Wrapper .form-range mit Input .form-range-input.
• Gefüllte Spur: browserübergreifend über --bs-range-fill.
• Wert-Bubble: per data-bs-bubble.
• Skalenstriche: automatisch aus einer verknüpften <datalist>.
• Theme-Farben: per .theme-* am Wrapper.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Überblick

Das native <input type="range"> lässt sich kaum gestalten, und eine gefüllte Spur ist mit reinem CSS nicht browserübergreifend möglich – nur Firefox kennt ::-moz-range-progress, und CSS kann den aktuellen Wert nicht auslesen. Deshalb ist Range in Bootstrap 6 eine kleine JavaScript-Komponente: Du packst ein <input class="form-range-input"> in .form-range, und das Plugin hält die Custom Property --bs-range-fill (0–1) synchron. Daraus zeichnet das CSS Füllung, Wert-Bubble und Skalenstriche.

Der Wrapper .form-range trägt die Tokens der Komponente, Input und Dekorationen erben sie. Alle .form-range auf der Seite werden automatisch initialisiert.

<label for="range1" class="form-label">Beispiel-Schieberegler</label>
<div class="form-range">
  <input type="range" class="form-range-input" id="range1">
</div>

Theme-Farben

Mit einer .theme-{farbe}-Klasse am Wrapper .form-range färbst du Füllung und Griff in der jeweiligen Theme-Farbe ein.

<div class="form-range theme-primary">
  <input type="range" class="form-range-input" aria-label="Schieberegler primary">
</div>
<div class="form-range theme-accent">
  <input type="range" class="form-range-input" aria-label="Schieberegler accent">
</div>
<div class="form-range theme-success">
  <input type="range" class="form-range-input" aria-label="Schieberegler success">
</div>
<div class="form-range theme-danger">
  <input type="range" class="form-range-input" aria-label="Schieberegler danger">
</div>
<div class="form-range theme-warning">
  <input type="range" class="form-range-input" aria-label="Schieberegler warning">
</div>
<div class="form-range theme-info">
  <input type="range" class="form-range-input" aria-label="Schieberegler info">
</div>
<div class="form-range theme-inverse">
  <input type="range" class="form-range-input" aria-label="Schieberegler inverse">
</div>
<div class="form-range theme-secondary">
  <input type="range" class="form-range-input" aria-label="Schieberegler secondary">
</div>

Deaktiviert

Das Attribut disabled am Input graut den Regler aus, deaktiviert Maus-Events und verhindert den Fokus.

<label for="disabledRange" class="form-label">Deaktivierter Schieberegler</label>
<div class="form-range">
  <input type="range" class="form-range-input" id="disabledRange" disabled>
</div>

Min und Max

Ohne Angabe reicht der Wertebereich von 0 bis 100. Über die Attribute min und max legst du eigene Grenzen fest.

<label for="range2" class="form-label">Beispiel-Schieberegler</label>
<div class="form-range">
  <input type="range" class="form-range-input" min="0" max="5" id="range2">
</div>

Schritte

Standardmäßig rastet der Regler auf ganzen Zahlen ein. Mit step änderst du die Schrittweite – step="0.5" verdoppelt hier die Anzahl der Stufen.

<label for="range3" class="form-label">Beispiel-Schieberegler</label>
<div class="form-range">
  <input type="range" class="form-range-input" min="0" max="5" step="0.5" id="range3">
</div>

Wert-Bubble

Mit data-bs-bubble am Wrapper erscheint eine Blase mit dem aktuellen Wert, die dem Griff folgt. Sie nutzt die Styles der Tooltips.

<label for="rangeBubble" class="form-label">Helligkeit</label>
<div class="form-range" data-bs-bubble>
  <input type="range" class="form-range-input" min="0" max="100" value="60" id="rangeBubble">
</div>

Skalenstriche

Verknüpfst du per list-Attribut eine <datalist> mit dem Input, zeichnet das Plugin für jede <option> einen Strich an der passenden Position – auch bei ungleichmäßigen Abständen. Ein label an der Option erscheint als Beschriftung unter dem Strich.

<label for="rangeTicks" class="form-label">Temperatur</label>
<div class="form-range">
  <input type="range" class="form-range-input" min="0" max="100" step="25" value="50" list="rangeTicksList" id="rangeTicks">
</div>
<datalist id="rangeTicksList">
  <option value="0" label="Kalt"></option>
  <option value="25"></option>
  <option value="50" label="Mild"></option>
  <option value="75"></option>
  <option value="100" label="Heiß"></option>
</datalist>

Mit Formularfeld

In einem .form-field kombinierst du den Regler mit Label und Beschreibung.

<div class="form-field">
  <label for="rangeField" class="form-label">Lautstärke</label>
  <div class="form-range" data-bs-bubble>
    <input type="range" class="form-range-input" id="rangeField">
  </div>
  <small class="form-text">Stelle die Lautstärke ein.</small>
</div>

Verwendung

Jedes .form-range wird beim Laden der Seite automatisch initialisiert. Ohne das Plugin wird die Füllung nicht dargestellt.

Per Data-Attribute

<div class="form-range" data-bs-bubble>
  <input type="range" class="form-range-input" min="0" max="100" value="40">
</div>

Per JavaScript

const element = document.querySelector('.form-range')
const range = new bootstrap.Range(element, {
  bubble: true,
  formatter: value => `${value}%`
})

Optionen

Methoden

Events

const input = document.querySelector('.form-range-input')

input.addEventListener('changed.bs.range', event => {
  console.log('Value:', event.value)
})

CSS-Variablen und Sass-Mixins findest du in der Originaldokumentation.