Slider ui-slider

Demo Ausprobieren

Fügt Ihrem Dashboard einen Slider hinzu, der Werte in Node-RED unter msg.payload ausgibt, sobald sich sein Wert ändert.

Eigenschaften

Prop	Dynamic	Description
Gruppe		Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird.
Größe		Steuert die Breite des Sliders in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe.
Beschriftung	✓	Der Text, der links vom Slider angezeigt wird. HTML-Inhalt ist erlaubt.
Daumenbeschriftung	✓	Definiert, wann die Daumenbeschriftung des Sliders angezeigt wird. Standardmäßig auf 'Beim Ziehen'.
Ticks anzeigen	✓	Definiert, wann die Ticks auf der Spur sichtbar sind. Standardmäßig auf 'Immer'.
Bereich	✓	min - der minimale Wert, auf den der Slider geändert werden kann. Wenn min > max, wird der Slider umgekehrt.; max - der maximale Wert, auf den der Slider geändert werden kann; Schritt - der Inkrement-/Dekrementwert, wenn der Slider bewegt wird.
Farbe	✓	main - Farbe des Sliders und Daumens; track - Farbe der Slider-Spur; thumb - Farbe des Griffs. Es kann der Name einer Farbe (rot, grün, blau, ...) oder ein Hex-Farbcode (#b5b5b5) sein.
Symbole	✓	Fügen Sie mdi-Symbole vor und nach dem Slider hinzu. Zum Beispiel "minus". Es ist nicht notwendig, das "mdi-" Präfix einzuschließen, nur den Namen des Symbols.
Ausgabe		Definiert, wann eine Nachricht gesendet wird, entweder während der Slider bewegt wird oder wenn der Slider losgelassen wird.

Dynamische Eigenschaften

Dynamic properties are those that can be overriden at runtime by sending a particular msg to the node.

Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.

Prop	Payload	Structures	Example Values
Beschriftung	msg.ui_update.class	String
Daumenbeschriftung	msg.ui_update.thumbLabel	true | false | 'always'
Ticks anzeigen	msg.ui_update.showTicks	true | false | 'always'
Bereich (min)	msg.ui_update.min	Number
Bereich (Schritt)	msg.ui_update.step	Number
Bereich (max)	msg.ui_update.max	Number
Symbol voranstellen	msg.ui_update.iconPrepend	String
Symbol anhängen	msg.ui_update.iconAppend	String
Farbe	msg.ui_update.color	String
Farbe der Spur	msg.ui_update.colorTrack	String
Farbe des Daumens	msg.ui_update.colorThumb	String
Klasse	msg.ui_update.class	String
Textfeld anzeigen	msg.ui_update.showTextField	true | false

Wert einstellen

Sie können den Wert des Sliders einstellen, indem Sie den jeweiligen Wert in msg.payload übergeben.

Steuerungen

msg.	Example	Description
aktiviert	true | false	Ermöglicht die Steuerung darüber, ob der Button anklickbar ist oder nicht.

Beispiel - Grundlegend

Beispiel eines gerenderten Sliders in einem Dashboard.

Beispiel - Daumen immer anzeigen

Beispiel eines Sliders mit 'Daumen immer anzeigen' auf 'Immer' gesetzt

Beispiel - Ticks anzeigen

Beispiel eines Sliders mit Ticks auf 'Immer' gesetzt

Ticks anpassen

Ticks können durch Überschreiben des CSS für den Slider angepasst werden.

Das Erscheinungsbild der Ticks kann durch die Verwendung der folgenden CSS-Variablen geändert werden

• --tick-scaleX zum horizontalen Anpassen der Ticks
• --tick-scaleY zum vertikalen Anpassen der Ticks
• --tick-color zum Ändern der Tick-Farbe

Beachten Sie, dass Sie möglicherweise unterschiedliche Klassen für vertikale und horizontale Slider erstellen müssen.

.my-slider-horizontal.nrdb-ui-slider{
    --tick-scaleX: 0.25;
    --tick-scaleY: 4;
    --tick-color: rgba(var(--v-theme-primary),0.7);
}
.my-slider-vertical.nrdb-ui-slider{
    --tick-scaleX: 4;
    --tick-scaleY: 0.25; 
    --tick-color: orange;
}

Verschiedene Stile können auf die Ticks des gefüllten Teils des Sliders angewendet werden.

.my-slider-horizontal.nrdb-ui-slider .v-slider-track__tick--filled{
    --tick-color:violet;
}

Beispiel - Vertikale Slider

Slider wechseln automatisch zu einer vertikalen Ausrichtung, wenn die Höhe größer als die Breite ist.

Beispiel eines vertikalen Sliders in einem Dashboard.