Schieberegler (Steuerelement)

Ein Schieberegler mit einer numerischen Skala von 0 bis 9.

Ein Schieberegler, auch Slider oder Track Bar, ist ein Steuerelement einer grafischen Benutzeroberfläche. Diese Art von Steuerelementen ist den physischen Schiebepotentiometern nachempfunden. (Halb-)kreisförmige Schieberegler sind physischen Drehwiderständen nachempfunden und werden als Radial Slider, Circular Slider oder Knob bezeichnet.

Schieberegler eignen sich immer dann, wenn der Anwender einen diskreten numerischen Wert oder einen Bereich von aufeinander folgenden numerischen Werten auswählen kann.

Erscheinungsbild

Am weitesten verbreitet sind die balkenförmigen Regler. Diese bestehen aus einem horizontalen oder vertikalen Balken (Bar oder Track), und einem Regler (Slider oder Thumb), der mit Hilfe der Maus, den Fingern (Touchscreen) oder den Pfeiltasten entlang des Balkens bewegt werden kann. Optional kann entlang des Balkens eine Skala (Tick Marks) angezeigt werden, um dem Benutzer die Orientierung zu erleichtern.

Kreisförmiger Schieberegler zur Festlegung eines Winkels. Daneben befindet sich ein numerisches Textfeld als alternative Eingabemethode.

Deutlich seltener trifft man auf (halb-)kreisförmige Schieberegler. Anstelle des geraden Balkens wird für den Wertebereich ein Kreisbogen herangezogen. Der Regler wird hier meistens als dünne Nadel angezeigt, die sich wie ein Uhrzeiger im Kreis drehen lässt. Auf diese Variante trifft man häufig in Audiosoftware. Die Skala lässt sich wie Minuten entlang einer analogen Uhr anordnen. Hier werden physische Drehregler imitiert.

Balkenförmige Schieberegler sind in nahezu allen Betriebssystemen mit einer grafischen Benutzeroberfläche, aber auch in praktisch allen aktuellen Webbrowsern nativ vorhanden, während (halb-)kreisförmige Schieberegler meistens von Drittanbietern bereitgestellt werden.

Bei den meisten Implementierungen ist die Skala gleichmäßig über die gesamte Länge verteilt. Es gibt jedoch auch Implementierungen, mit unregelmäßigen Abständen. Ebenso kann die optische Gestaltung der einzelnen Markierungen in Länge, Stärke oder Farbe variieren. Ähnlich wie bei einem Lineal, kann beispielsweise jeder zehnte Strich länger oder dicker sein, als die anderen Striche. Um beispielsweise Gefahrenbereiche für technische Steuerungen zu kennzeichnen, können Markierungen oder die Füllung des Balkens am Ende der Skala gelb bzw. rot dargestellt werden.

Um dem Benutzer die Orientierung zu erleichtern, sollte man (zumindest an den Enden der Skala) kleine Beschriftungsfelder oder Symbole platzieren. Unter Windows werden die Beschriftungsfelder an den beiden Enden des Balkens lax als „Buddy“ bezeichnet.

Im Hintergrund repräsentiert die Skala stets einen diskreten numerischen Wertebereich. Allerdings lassen sich diese Werte dem Benutzer gegenüber als beliebige Ordinalskala präsentieren. Beispielsweise könnte ein Schieberegler für Schulnoten per Deklaration eine Skala von „1“ bis „6“ besitzen. Anstelle der Zahlenwerte kann man dem Benutzer jedoch auch, mit Hilfe von Beschriftungsfeldern, eine Skala von „sehr gut“ bis „ungenügend“ anzeigen.

Bei Lautstärkereglern wird anstelle eines rechteckigen horizontalen Balkens oft ein von links nach rechts ansteigendes rechtwinkliges Dreieck dargestellt. Ähnlich sieht es bei Apps zur Steuerung der Helligkeit von Bildschirmen oder der Lampen im Smart Home aus.

Grundsätzlich sollte sich die Darstellung eines Schiebereglers stets an der Realität orientieren. Beispielsweise sollte ein Temperaturregler wie ein reales Thermometer als vertikaler Schiebebalken dargestellt werden. Das gilt auch für die Skala, die im Beispiel gleichmäßig von kalt (unten) nach warm (oben) angeordnet werden sollte.

Ebenso sollte die Richtung der Skala bei mehreren Schiebereglern einheitlich festgelegt werden.

Ein Schieberegler zur Auswahl eines Wertebereichs (RangeSlider).

Es existieren auch Implementierungen mit mehreren Reglern auf dem gleichen Balken. Dadurch können auf einer linearen Skala Intervalle ausgewählt werden. Beispiele dafür sind die Steuerelemente RangeSlider aus Microsoft Xamarin und das gleichnamige Pendant für Google Android.

Anwendungsgebiete

Bildschirmfoto des Audioeditors Mixcraft 9. Im unteren Bereich sieht man mehrere vertikale Schieberegler und rechts in der Mitte sieht man einige radiale Schieberegler (Potentiometer)

Idealerweise sollen Schieberegler dem Anwender unmittelbar während der Betätigung ein Feedback geben.

Ein typisches Anwendungsfeld für Schieberegler sind Programme zur Medienwiedergabe. Hier werden diese für unterschiedliche Zwecke eingesetzt:

• als Fortschrittsanzeige
• Pegelsteller (Fader)
• Lautstärkeregler
• Mixer
• Balance-Regler
• Grafische Equalizer

Ein weiteres Beispiel sind Bildbearbeitungsprogramme, bei denen folgende Werte typischerweise mit Schiebereglern verändert werden können:

• Farbsättigung
• Stärke und Radius von Grafikfiltern (z. B. Weichzeichner)
• Helligkeit
• Deckkraft
• Kontrast
• Zoomfaktor

Zudem werden Schieberegler häufig zur Steuerung von technischen Prozessen eingesetzt:

• Steuerung der Geschwindigkeit von Förderbändern
• Dimmen der Innenbeleuchtung per App im Smart Home
• Einstellung der Raumtemperatur oder Luftfeuchtigkeit bei Klimaanlagen

Im Kontext der Regelungstechnik handelt es sich bei einem Schieberegler nicht um einen Regler im wörtlichen Sinne, sondern um ein Stellglied für einen diskreten Sollwert einer (physikalischen) Regelgröße.

Alternativen

Ein Drehfeld zur Festlegung der Tabulatorbreite in Gedit

Die häufigste Alternative zu Schiebereglern, stellen Drehfelder dar. Dabei handelt es sich um numerische Textfelder mit einer Schaltfläche zur Inkrementierung und Dekrementierung des aktuellen Wertes. Diese werden auch als UpDown, NumericUpDown, Spin Control, Spinner oder Stepper bezeichnet. Sie eignen sich vor allem dann, wenn man in der Lage sein möchte, einen bestimmten Wert mit der Tastatur eingeben zu können oder wenn nur wenig Platz verfügbar ist. Bei Touch-Bildschirmen können Schieberegler mit den Fingern in der Regel einfacher bedient werden, als die kleinen Inkrement- und Dekrementschaltflächen.

Eine weitere Alternative zu Schiebereglern stellen horizontale oder vertikale Bildlaufleisten dar. Schieberegler und Bildlaufleisten sollten dem Benutzer ein direktes Feedback geben. Bildlaufleisten eignen sich, wenn der genaue numerische Wert unerheblich ist. Schieberegler sind wegen der sichtbaren Skala und einer festen Schrittweite für überschaubare Wertebereiche besser geeignet.

Verbund aus Kombinationsfeld und Schieberegler.

Bei weniger als vier möglichen diskreten Werten oder langen Texten eignen sich Optionsfelder oder Kombinationsfelder besser. Einige Programme (darunter auch Adobe Photoshop) verbinden ein Kombinationsfeld mit einem Schieberegler, der angezeigt wird, wenn das Kombinationsfeld durch den Benutzer ausgeklappt wird. Auf diese Art und Weise lässt sich Platz sparen, wenn das Kombinationsfeld schmaler ist als das Drop-Down-Fenster mit dem Schieberegler. Zudem hat der Benutzer auch die Möglichkeit, einen Wert via Tastatur einzugeben.

Schieberegler sollten nicht für binäre Werte verwendet werden. Hierfür existieren Kontrollkästchen oder Umschalter (Switch oder Toggle Switch).

Für einfache, linear geordnete Bewertungsskalen eignen sich Sternchen-Skalen (Rating Control oder Rating Bar) besser.

Implementierungen

Microsoft Windows (Systemkomponente)

Unter Microsoft Windows waren balkenförmige Schieberegler erstmals in Windows 95 und Windows NT 3.51 unter dem Klassennamen „msctls_trackbar32“ enthalten. Es ist möglich, einen konkreten Wert oder einen zusammenhängenden Wertebereich auszuwählen. Das Verhalten und die Darstellung können über Fensterstile und Nachrichten beeinflusst werden.

Microsoft .NET

Windows Forms

Die Komponente System.Windows.Forms.TrackBar kapselt die native Systemkomponente für das GUI-Toolkit Windows Forms. Dort steht diese Komponente bereits seit der ersten Version des .NET Frameworks zur Verfügung. Allerdings fehlt eine Funktion, Bereiche markieren zu können, obwohl die native Komponente diese Funktion bereitstellt.

Windows Presentation Foundation (WPF)

Die WPF-Komponente System.Windows.Controls.Slider baut nicht auf der Systemkomponente auf und ist frei transformierbar. Beispielsweise kann der Schieberegler in einem beliebigen Winkel gedreht dargestellt werden, statt nur als horizontaler oder vertikaler Balken. Es ist möglich, einen konkreten Wert oder einem zusammenhängenden Bereich auszuwählen.

Microsoft Xamarin

Analog zu WPF, nutzt auch Xamarin eine eigene systemunabhängige Implementierung, die unter allen Zielplattformen das gleiche Ergebnis in Funktionalität und Design erzeugt.

Microsoft Fluent UI Web Components

Balkenförmige Schieberegler sind auch in der Komponentenbibliothek Microsoft Fluent UI Web Components enthalten. Die Skala wird nicht automatisch in gleich große Abschnitte eingeteilt, sondern kann beliebig (z. B. logarithmisch) gestaltet werde. Entlang der Skala können Beschriftungen angebracht werden.

Java

Swing

In Java Swing existiert die Komponente javax.swing.JSlider, die einen balkenförmigen Schieberegler verkörpert. Dabei handelt es sich um eine plattformunabhängige Implementierung. Durch das Look and Feel Konzept von Swing, kann der Schieberegler nach dem nativen Design des Betriebssystems dargestellt werden.

Standard Widget Toolkit (SWT)

Die Implementierung in SWT verwendet eine Bildlaufleiste anstelle eines nativen Schiebereglers. Bei einfachen Bildlaufleisten fehlt die Funktion, eine Skala anzuzeigen und es können auch keine zusammenhängende Wertebereiche ausgewählt werden.

JavaFX

Schieberegler sind auch in JavaFX enthalten. Es handelt sich um eine plattformunabhängige Implementierung. Die einzelnen Bestandteile können über CSS benutzerdefiniert formatiert werden. Neben der Standardimplementierung existieren auch diverse Erweiterungen von Drittanbietern.

JavaServer Faces (JSF)

Balkenförmige Schieberegler sind in den meisten aktuellen Komponenten-Frameworks für JavaServer Faces enthalten. Dazu zählen unter anderem Oracle ADF, RichFaces, ICEfaces, BootsFaces und PrimeFaces. PrimeFaces stellt zusätzlich noch kreisförmige Schieberegler bereit.

Android

Unter Android existieren zwei Klassen für balkenförmige Schieberegler. Mit der Klasse Slider kann ein einzelner Wert ausgewählt werden und ein RangeSlider erlaubt dem Benutzer, ein Intervall auszuwählen. Kreisförmige Schieberegler sind nicht nativ implementiert.

Apple macOS und iOS

Im Gegensatz zu den meisten Betriebssystemen, bietet Apple in seinen Betriebssystemen neben linearen auch kreisförmige Schieberegler nativ an.

HTML 5 und CSS 3

In HTML 5 wurde für Formulare der neue Eingabetyp „range“ eingeführt. Moderne Webbrowser stellen Eingabefelder dieses Typs als Schieberegler dar, ältere Webbrowser zeigen hingegen nur ein Textfeld an. Zur Sicherheit sollten daher die übermittelten Daten client- oder serverseitig auf Gültigkeit geprüft werden.

Die meisten aktuellen Browser stellen zudem CSS Pseudoelemente bereit, mit denen die einzelnen Bestandteile des Schiebereglers benutzerdefiniert formatiert werden können. Diese sind derzeit (Stand: Januar 2022) allerdings nicht standardisiert und besitzen daher ein browserspezifisches Präfix.

	Chrome, Opera, Edge	Firefox	Internet Explorer
Regler	::-webkit-slider-thumb	::-moz-range-thumb	::-ms-thumb
Balken	::-webkit-slider-runnable-track	::-moz-range-track	::-ms-track
Balken vor dem Regler		::-moz-range-progress	::-ms-fill-lower
Balken nach dem Regler			::-ms-fill-upper
Skala vor dem Regler			::-ms-ticks-before
Skala nach dem Regler			::-ms-ticks-after
Tooltip			::-ms-tooltip

Teilweise können diese Pseudoelemente auch mit Pseudoklassen kombiniert werden, um beispielsweise Hover-Effekte zu erzeugen oder den aktiven vom inaktiven Zustand optisch zu unterscheiden.

Für Webformulare existieren auch diverse Frameworks, die unabhängig von der Standardimplementierung der Webbrowser komplexe Steuerelemente (darunter auch radiale Schieberegler) mit Hilfe von JavaScript und CSS bereitstellen.