Pages

Benutzerdefinierter Schieberegler (Custom Slider)

Der Custom Slider ist ein interaktives Steuerelement, mit dem Benutzer einen Wert durch das Verschieben eines Reglers auf einer Spur anpassen können.
Er lässt sich mit einer Variablen verbinden (z. B. über CODESYS, MQTT etc.), um Systemparameter in Echtzeit zu beeinflussen.

Übersicht

Der Custom Slider bietet eine intuitive Möglichkeit, numerische Werte direkt über die Benutzeroberfläche zu ändern.
Dank Echtzeitbindung an Variablen können Parameter wie Geschwindigkeit, Helligkeit oder Temperatur präzise und sofort angepasst werden.

Hauptfunktionen

Variablenbindung

  • Verbindung mit Live-Datenquellen (z. B. CODESYS, MQTT)
  • Aktualisierte Werte werden bei jeder Benutzeraktion automatisch übermittelt

Interaktiver Regler

  • Der Benutzer kann den „Daumen“ (Thumb) verschieben, um den Wert zu ändern
  • Optional: Einrasten auf bestimmte Werte für gleichmäßige Schritte

Live-Wertanzeige

  • Aktueller Wert kann neben oder auf dem Slider angezeigt werden
  • Unterstützung für Einheiten (z. B. %, °C, rpm) zur besseren Kontextualisierung

Benutzerdefinierter Bereich & Schritte

  • Frei definierbare Minimal- und Maximalwerte sowie Schrittweite
  • Feine Kontrolle über den zulässigen Wertebereich

Eigene Beschriftungen & Markierungen

  • Optionale Beschriftungen oder Skalenmarkierungen zur besseren Orientierung
  • Erleichtert das Verständnis für den Funktionsbereich des Reglers

Anpassbares Erscheinungsbild

  • Farbe, Größe, Ausrichtung (horizontal/vertikal) und Spurdesign frei konfigurierbar

Anwendungsfälle

Parameter-Feinjustierung

  • Beispiel: Anpassung der Motordrehzahl oder Systemverstärkung im HMI

Umgebungsregelung

  • Beispiel: Festlegung eines neuen Sollwerts für ein Heiz-/Kühlsystem

Benutzereinstellungen

  • Beispiel: Interaktive Steuerung von Bildschirmhelligkeit oder Lautstärke

SVG ID Referenztabelle

[img_1]

Verwende die folgenden SVG IDs zur Bindung dynamischer Werte an die Slider-Elemente:

# Element SVG ID
1 Balkenfüllung links [code_block_0]
2 Balkenpfad [code_block_1]
3 Regler (Thumb) [code_block_2]

Beispiel:

[code_block_3]