Slider & Range, Schieberegler-Komponenten im UI-Design

Ein Slider (Schieberegler) ist eine UI-Komponente, mit der Nutzer einen Wert innerhalb eines definierten Bereichs durch Ziehen eines Schiebers auf einer horizontalen (oder vertikalen) Skala auswählen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Schieberegler, Range Input, Scrubber, Regler, Track-and-Thumb Control

Was ist ein Slider?

Slider ermöglichen die intuitive Auswahl von Werten, die auf einer Skala liegen, besonders dann, wenn der exakte Wert weniger wichtig ist als die relative Position (z. B. Lautstärke: „eher laut" statt exakt 73%). Sie sind eine Alternative zum numerischen Input-Feld bei Einstellungen, Filtern und Konfigurationen, bei denen der Wertebereich klar begrenzt ist.

Erklärung

Varianten

• Continuous Slider: Jeder Wert im Bereich wählbar (z. B. Lautstärke 0–100%). Für Einstellungen, bei denen der exakte Wert nicht kritisch ist.
• Discrete Slider: Nur definierte Stufen wählbar (z. B. Schriftgröße: 12, 14, 16, 18, 24, 32 pt). Snapping-Punkte visuell als Dots darstellbar.
• Range Slider (Zwei-Thumb): Zwei Schiebegriffe definieren einen Start- und Endwert (z. B. Preisfilter: 50–300 €). Komplexer in der Implementierung und Bedienung.
• Vertical Slider: Senkrechte Ausrichtung, selten in Web-UIs, häufiger in Audio-Mixing-Interfaces.

Anatomie

• Track: Die horizontale Linie, auf der sich der Thumb bewegt. Oft zweifarbig: inaktiver Bereich grau, aktiver Bereich (vom Minimum bis zum Thumb) in Markenfarbe.
• Thumb: Der verschiebbare Griff (meistens ein Kreis). Muss ausreichend groß für Touch-Bedienung sein.
• Value Indicator / Tooltip: Zeigt den aktuellen Wert beim Ziehen an, schwebt über dem Thumb.
• Min/Max Labels: Optionale Beschriftungen an den Enden der Skala.
• Step Markers: Punkte oder Striche auf dem Track bei diskreten Stufen.
• Input Field Kopplung: Optionales Zahlenfeld neben dem Slider für präzise Eingabe.

States (Zustände)

Accessibility (WCAG 2.1)

• Natives <input type="range"> verwenden, korrekte ARIA-Semantik inklusive
• aria-valuemin, aria-valuemax, aria-valuenow bei Custom-Implementierungen
• aria-valuetext für nicht-numerische Werte: aria-valuetext="Mittel" statt aria-valuenow="50"
• Tastatursteuerung: ← / → (kleiner/größerer Schritt), Home (Minimum), End (Maximum), Page Up/Down (größerer Schritt)
• Value Tooltip muss nicht nur on hover, sondern auch bei Focus sichtbar sein
• Range Slider: zwei getrennte Inputs mit unterschiedlichen aria-label (aria-label="Mindestpreis" / aria-label="Höchstpreis")
• Immer eine numerische Eingabe-Alternative anbieten (für Nutzer, die Slider schwer bedienen können)

Beispiele

1. Spotify, Lautstärke-Slider: Horizontaler Continuous Slider in der Playbar. Track wird bei Hover breiter (angenehmes visuelles Feedback). Keyboard-Navigation mit Pfeiltasten funktioniert korrekt. Value wird als Tooltip beim Hovern angezeigt.
2. Amazon, Preisfilter: Klassischer Range Slider mit zwei Thumbs für Preisuntergrenze und -obergrenze. Darunter gekoppelte Input-Felder für präzise Eingabe. Hervorragendes UX-Pattern: Slider für schnelles Anpassen, Felder für exakte Werte.
3. Mobile vs. Desktop: Touch-Sliders benötigen einen Thumb-Durchmesser von mindestens 44 px. iOS nutzt für Lautstärke- und Helligkeitseinstellungen native Slider mit großem Touch-Target und Haptic Feedback. Desktop-Slider können kleiner sein, da Maus-Dragging präziser ist.
4. Accessibility Best Practice: Die WCAG-konforme Implementierung auf gov.uk zeigt neben dem Slider immer ein gekoppeltes Eingabefeld, Nutzer mit motorischen Einschränkungen können den exakten Wert eintippen statt ziehen.
5. Häufiger Fehler: Slider ohne numerischen Wert-Indicator einsetzen, Nutzer wissen nicht, welchen genauen Wert sie eingestellt haben. Oder: Slider für Einstellungen verwenden, bei denen der präzise Wert kritisch ist (z. B. exaktes Datum), dort sind Eingabefelder besser.

In der Praxis

Figma: Slider-Komponente mit Track (Rectangle, Markenfarbe bis Thumb-Position), Thumb (Circle, mit Hover- und Focus-Variant), Value-Tooltip (als separater Frame über dem Thumb). Auto Layout nicht geeignet für die Track-Teilung, verwende Masking oder Component Variables. Für Prototypen: Drag-Interaktion auf Thumb mit Variable zur Wertdarstellung.

HTML/CSS-Grundstruktur: ```html <label for="volume">Lautstärke: <span id="volume-value">50</span>%</label> <input type="range" id="volume" name="volume" min="0" max="100" value="50" step="1" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50 Prozent" />

<!-- Range Slider (Preis-Filter) --> <label for="price-min">Mindestpreis</label> <input type="range" id="price-min" min="0" max="1000" value="50"> <label for="price-max">Höchstpreis</label> <input type="range" id="price-max" min="0" max="1000" value="500"> ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wann sollte ich einen Slider anstelle eines Number-Inputs verwenden? Slider eignen sich, wenn der relative Wert (viel/wenig, hell/dunkel) wichtiger ist als der absolute Wert. Perfekt für Einstellungen wie Lautstärke, Bildschirmhelligkeit oder Filterbereiche. Number-Inputs sind besser für exakte Werte, die der Nutzer kennt (z. B. Rechnungsbetrag, Jahrgang). Optimal: Slider mit gekoppeltem Number-Input kombinieren.

Wie mache ich einen Range Slider (zwei Thumbs) barrierefrei? Range Slider sind die schwierigste Slider-Variante für Accessibility. Beste Praxis: Zwei separate <input type="range">-Elemente mit klar unterschiedlichen aria-label-Attributen (z. B. „Mindestpreis" und „Höchstpreis"). Sicherstellen, dass der Mindest-Slider nicht über den Maximum-Slider gezogen werden kann (JavaScript-Constraint). Zusätzlich immer Zahlen-Eingabefelder als Alternative anbieten.

Verwandte Einträge

• Progress Bar
• Input Field
• Date Picker
• Formular-Design

Weiterführend

• Nielsen Norman Group, „Slider Design": nngroup.com
• Material Design 3, Sliders: m3.material.io/components/sliders
• Apple Human Interface Guidelines, Sliders: developer.apple.com/design/human-interface-guidelines/sliders
• MDN Web Docs, <input type="range">: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range