Schieberegler (Steuerelement)
Ein Schieberegler, auch Slider oder Track Bar, ist ein Steuerelement einer grafischen Benutzeroberfläche. Diese Art von Steuerelementen ist den physischen Schiebereglern nachempfunden. (Halb-)kreisförmige Schieberegler sind physischen Potentiometern nachempfunden und werden als Radial Slider[1], Circular Slider[2] oder Knob[3] bezeichnet.
_example.PNG.webp){kind=small}
Schieberegler eignen sich immer dann, wenn der Anwender einen diskreten numerischen Wert oder einen Bereich von aufeinander folgenden numerischen Werten auswählen kann.[4]
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.[5][6]
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.[7] Ä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.[8][2] Unter Windows werden die Beschriftungsfelder an den beiden Enden des Balkens lax als "Buddy" bezeichnet.[9]
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 sollten sich die Darstellung eines Schiebereglern 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.[8]
Ebenso sollte die Richtung der Skala bei mehreren Schiebereglern einheitlich festgelegt werden.
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[10] und das gleichnamige Pendant für Google Android[11].
Anwendungsgebiete
Idealerweise sollen Schieberegler dem Anwender unmittelbar während der Betätigung ein Feedback geben.[8][5][2]
Ein typisches Anwendungsfeld für Schieberegler sind Programme zur Medienwiedergabe. Hier werden diese für unterschiedliche Zwecke eingesetzt:
- als Fortschrittsanzeige
- Lautstärkeregler
- Mixer
- Balance-Regler
- 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
Alternativen
Die häufigste Alternative zu Schiebereglern, stellen numerische Textfelder mit einer Schaltfläche zur Inkrementierung und Dekrementierung des aktuellen Wertes dar. Diese werden als UpDown, NumericUpDown, Spin Controls, Spinner oder Steppers[12] 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.[13][5] 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.[14]
Bei weniger als vier möglichen diskreten Werten eignen sich Optionsfelder oder Kombinationsfeld besser.
Schieberegler sollten nicht für binäre Werte verwendet werden.[8] Hierfür existieren Kontrollkästchen oder Schalter (Switch oder Toggle Switch).
Für einfache linear geordnete Bewertungsskalen eignen sich Sternchen-Skalen (Rating Control[15] oder Rating Bar[16]) 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.[4] Es ist möglich, einen konkreten Wert oder einen zusammenhängenden Wertebereich auszuwählen.[17] Das Verhalten und die Darstellung können über Fensterstile[18] und Nachrichten[19] beeinflusst werden.
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 dort bis heute die Funktion, Bereiche markieren zu können, obwohl die native Komponente diese Funktion bereitstellt.
Das folgende C# Beispiel zeigt ein Formular, dessen Deckkraft sich (im Bereich von 20 bis 100 Prozent) mit einem Schieberegler verändern lässt.
using System;
using System.Drawing;
using System.Windows.Forms;
internal class MainForm : Form
{
private Label lbl100;
private Label lbl20;
private TrackBar tbOpacity;
//Formular initialisieren
public MainForm()
{
tbOpacity = new TrackBar();
lbl20 = new Label();
lbl100 = new Label();
SuspendLayout();
tbOpacity.SetBounds(10, 10, 600, 90);
tbOpacity.TickStyle = TickStyle.Both; //Beidseitige Skala
tbOpacity.TickFrequency = 10; //Skala in 10er Schritten
tbOpacity.Minimum = 20; //Wertebereich Minimum: 20%
tbOpacity.Maximum = 100; //Wertebereich Maximum: 100%
tbOpacity.Value = 100; //Aktueller Wert: 100% Deckkraft
tbOpacity.ValueChanged += new EventHandler(SyncOpacity);
lbl20.SetBounds(10, 100, 60, 30);
lbl20.FlatStyle = FlatStyle.System;
lbl20.Text = "20%";
lbl20.TextAlign = ContentAlignment.MiddleCenter;
lbl100.SetBounds(550, 100, 60, 30);
lbl100.FlatStyle = FlatStyle.System;
lbl100.Text = "100%";
lbl100.TextAlign = ContentAlignment.MiddleCenter;
AutoScaleDimensions = new SizeF(12F, 25F);
AutoScaleMode = AutoScaleMode.Font;
ClientSize = new Size(620, 140);
Controls.Add(lbl100);
Controls.Add(lbl20);
Controls.Add(tbOpacity);
FormBorderStyle = FormBorderStyle.FixedSingle;
MaximizeBox = false;
Text = "Deckkraft verändern...";
ResumeLayout(false);
}
//Einstiegspunkt des Programms
private static void Main()
{
Application.Run(new MainForm());
}
//Wert der TrackBar mit Deckkraft des Formulars synchronisieren
private void SyncOpacity(object sender, EventArgs e)
{
//Aktueller Wert der TrackBar entspricht der Deckkraft des Formulars
Opacity = tbOpacity.Value / 100F;
}
}
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.[20] Die Skala wird nicht automatisch in gleichgroße Abschnitte eingeteilt, sondern kann beliebig (z. B. logarithmisch) gestaltet werde. Entlang der Skala können Beschriftungen angebracht werden.
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.[21] Bei einfachen Bildlaufleiste 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.[22] Es handelt sich um eine plattformunabhängige Implementierung. Die einzelnen Bestandteile können über CSS benutzerdefiniert formatiert werden.[23] 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[24], RichFaces[25], ICEfaces[26], BootsFaces[27] und PrimeFaces[28]. PrimeFaces stellt zusätzlich noch kreisförmige Schieberegler bereit.[3]
Android
Unter Android existieren zwei Klassen für balkenförmige Schieberegler. Mit der Klasse Slider[29] kann ein einzelner Wert ausgewählt werden und ein RangeSlider[11] 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.[30] 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.
Einzelnachweise
- Actipro Software - Docs > WPF Controls > Actipro Shared Library > Controls > RadialSlider (englisch) Abgerufen am 10. Januar 2022.
- Apple - Human Interface Guidelines > Sliders (englisch) Abgerufen am 10. Januar 2022.
- PrimeFaces - Knob (englisch) Abgerufen am 28. Januar 2022.
- Microsoft Docs - CSliderCtrl Class (englisch) Abgerufen am 10. Januar 2022.
- Microsoft Docs - Sliders (Design basics) (englisch) Abgerufen am 10. Januar 2022.
- Microsoft Docs - About Trackbar Controls (englisch) Abgerufen am 10. Januar 2022.
- Oracle - How to Use Sliders (englisch) Abgerufen am 31. Januar 2022.
- Microsoft Docs - Sliders (UWP) (englisch) Abgerufen am 10. Januar 2022.
- Microsoft Docs - How to Use Buddy Windows (englisch) Abgerufen am 31. Januar 2022.
- Microsoft Docs - Xamarin Community Toolkit RangeSlider (englisch) Abgerufen am 10. Januar 2022.
- Android Developers > Docs > Reference > RangeSlider (englisch) Abgerufen am 10. Januar 2022.
- Apple - Human Interface Guidelines > Steppers (englisch) Abgerufen am 10. Januar 2022.
- Microsoft Docs - Spin Controls (englisch) Abgerufen am 10. Januar 2022.
- ScrollBar and TrackBar Controls (englisch) Abgerufen am 3. Februar 2022.
- Microsoft Docs - Rating control (englisch) Abgerufen am 31. Januar 2022.
- Android Developers > Docs > Reference > RatingBar (englisch) Abgerufen am 31. Januar 2022.
- Microsoft Docs - About Trackbar Controls (englisch) Abgerufen am 10. Januar 2022.
- Microsoft Docs - Trackbar Control Styles (englisch) Abgerufen am 3. Februar 2022.
- Microsoft Docs - Trackbar Control Messages (englisch) Abgerufen am 3. Februar 2022.
- Fluent UI Web Components > fluent-slider (englisch) Abgerufen am 29. Januar 2022.
- Java > SWT JFace Eclipse > Slider (englisch) Abgerufen am 30. Januar 2022.
- Oracle > JavaFX Documentation Home > Using JavaFX UI Controls > Slider (englisch) Abgerufen am 2. Februar 2022.
- Oracle > JavaFX CSS Reference Guide > Slider (englisch) Abgerufen am 2. Februar 2022.
- Oracle Fusion Middleware Tag Reference for Oracle ADF Faces - RichInputNumberSlider (englisch) Abgerufen am 28. Januar 2022.
- RichFaces - inputNumberSlider (englisch) Abgerufen am 28. Januar 2022.
- ICEfaces - sliderEntry (englisch) Abgerufen am 28. Januar 2022.
- BootsFaces - Slider (englisch) Abgerufen am 28. Januar 2022.
- PrimeFaces - Slider (englisch) Abgerufen am 28. Januar 2022.
- Android Developers > Docs > Reference > Slider (englisch) Abgerufen am 10. Januar 2022.
- WHATWG > HTML > Forms > The input element > Range state (englisch) Abgerufen am 3. Februar 2022.