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 Bearbeiten
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.
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.
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 Bearbeiten
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 Bearbeiten
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.
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 Bearbeiten
Microsoft Windows (Systemkomponente) Bearbeiten
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 Bearbeiten
Windows Forms Bearbeiten
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) Bearbeiten
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 Bearbeiten
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 Bearbeiten
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 Bearbeiten
Swing Bearbeiten
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) Bearbeiten
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 Bearbeiten
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) Bearbeiten
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 Bearbeiten
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 Bearbeiten
Im Gegensatz zu den meisten Betriebssystemen, bietet Apple in seinen Betriebssystemen neben linearen auch kreisförmige Schieberegler nativ an.
HTML 5 und CSS 3 Bearbeiten
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.
Einzelnachweise Bearbeiten
- RadialSlider. In: actiprosoftware.com. Actipro Software LLC., abgerufen am 10. Januar 2022 (englisch).
- ↑ Sliders. In: developer.apple.com. Apple, abgerufen am 10. Januar 2022 (englisch).
- ↑ Knob. In: primefaces.org. PrimeTek Informatics, abgerufen am 28. Januar 2022 (englisch).
- ↑ Tyler Whitney et al.: CSliderCtrl Class. In: learn.microsoft.com. Microsoft, abgerufen am 10. Januar 2022 (englisch).
- ↑ Jim Walker et al.: Sliders (Design basics). In: learn.microsoft.com. Microsoft, abgerufen am 10. Januar 2022 (englisch).
- ↑ Jim Walker et al.: About Trackbar Controls. In: learn.microsoft.com. Microsoft, abgerufen am 10. Januar 2022 (englisch).
- How to Use Sliders. In: docs.oracle.com. Oracle, abgerufen am 31. Januar 2022 (englisch).
- ↑ Jim Walker et al.: Sliders (UWP). In: learn.microsoft.com. Microsoft, abgerufen am 10. Januar 2022 (englisch).
- Jim Walker, Michael Satran: How to Use Buddy Windows. In: learn.microsoft.com. Microsoft, abgerufen am 31. Januar 2022 (englisch).
- Gerald Versluis, David Britch: Xamarin Community Toolkit RangeSlider. In: learn.microsoft.com. Microsoft, abgerufen am 10. Januar 2022 (englisch).
- ↑ RangeSlider. In: developer.android.com. Android, abgerufen am 10. Januar 2022 (englisch).
- Steppers. In: developer.apple.com. Apple, abgerufen am 10. Januar 2022 (englisch).
- Jim Walker et al.: Spin Controls. In: learn.microsoft.com. Microsoft, abgerufen am 10. Januar 2022 (englisch).
- ScrollBar and TrackBar Controls. In: w3computing.com. Abgerufen am 3. Februar 2022 (englisch).
- Jim Walker et al.: Rating control. In: learn.microsoft.com. Microsoft, abgerufen am 31. Januar 2022 (englisch).
- RatingBar. In: developer.android.com. Android, abgerufen am 31. Januar 2022 (englisch).
- Jim Walker et al.: Trackbar Control Styles. In: learn.microsoft.com. Microsoft, abgerufen am 3. Februar 2022 (englisch).
- Jim Walker et al.: Trackbar Control Messages. In: learn.microsoft.com. Microsoft, abgerufen am 3. Februar 2022 (englisch).
- Brook Durant et al.: Slider. In: learn.microsoft.com. Microsoft, abgerufen am 29. Januar 2022 (englisch).
- SWT Sliders. In: java2s.com. Abgerufen am 30. Januar 2022 (englisch).
- Slider. In: docs.oracle.com. Oracle, abgerufen am 2. Februar 2022 (englisch).
- Slider. In: docs.oracle.com. Oracle, abgerufen am 2. Februar 2022 (englisch).
- <af:inputNumberSlider>. In: docs.oracle.com. Oracle, abgerufen am 28. Januar 2022 (englisch).
- <rich:inputNumberSlider>. In: showcase.richfaces.org. Red Hat, abgerufen am 28. Januar 2022 (englisch).
- <ace:sliderEntry> - Overview. In: icefaces-showcase.icesoft.org. ICEsoft Technologies Canada, abgerufen am 28. Januar 2022 (englisch).
- Slider. In: showcase.bootsfaces.net. Abgerufen am 28. Januar 2022 (englisch).
- Slider. In: primefaces.org. PrimeTek Informatics, abgerufen am 28. Januar 2022 (englisch).
- Slider. In: developer.android.com. Android, abgerufen am 10. Januar 2022 (englisch).
- WHATWG > HTML > Forms > The input element > Range state. In: html.spec.whatwg.org. WHATWG, abgerufen am 3. Februar 2022 (englisch).