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