Adds a slider to your dashboard that will emit values in Node-RED under msg.payload
anytime it's value is changed.
Properties
Prop | Dynamic | Description |
---|---|---|
Group | Defines which group of the UI Dashboard this widget will render in. | |
Size | Controls the width of the slider with respect to the parent group. Maximum value is the width of the group. | |
Label | ✓ | The text shown to the left of the slider. |
Thumb Label | ✓ | Defined when the thumb of the slider will show. Defaults to 'On Drag'. |
Show Ticks | ✓ | Defined when the ticks will be visible on the track. Defaults to 'Always'. |
Range | ✓ | min - the minimum value the slider can be changed to; max - the maximum value the slider can be changed to; step - the increment/decrement value when the slider is moved. |
Color | ✓ | main - color of the slider and thumb; track - color of the slider track; thumb - color of the handle. It could be the name of a color (red, green, blue, ...) or a Hex color code (#b5b5b5). |
Icons | ✓ | Add mdi icon before and after the slider. For example, "minus". There is no need to include the "mdi-" prefix, just the name of the icon. |
Output | Defines when a msg is emitted, either as the slider is moved, or as the slider is released. |
Dynamic Properties
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 |
---|---|---|---|
Label | msg.ui_update.class | String | |
Thumb Label | msg.ui_update.thumbLabel | true | false | 'always' | |
Show Ticks | msg.ui_update.showTicks | true | false | 'always' | |
Range (min) | msg.ui_update.min | Number | |
Range (step) | msg.ui_update.step | Number | |
Range (max) | msg.ui_update.max | Number | |
Icon Prepend | msg.ui_update.iconPrepend | String | |
Icon Append | msg.ui_update.iconAppend | String | |
Color | msg.ui_update.color | String | |
Color Track | msg.ui_update.colorTrack | String | |
Color Thumb | msg.ui_update.colorThumb | String | |
Class | msg.ui_update.class | String |
Setting Value
You can set the value of the slider by passing in the respective value in msg.payload
.
Example - Basic
Example of a rendered slider in a Dashboard.
Example - Always Show Thumb
Example of a slider with 'Show Thumb' set to 'Always'
Example - Show Ticks
Example of a slider with ticks set to 'Always'
Customize ticks
Ticks can customized by overriding the CSS for slider.
The appearance of ticks can be changed by using the following CSS variables
--tick-scaleX
to resize ticks horizontally--tick-scaleY
to resize ticks vertically--tick-color
to change ticks color
Note that you may need to create different classes for vertical and horizontal slider.
.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;
}
Different styles can be applied to the ticks of the filled part of the slider.
.my-slider-horizontal.nrdb-ui-slider .v-slider-track__tick--filled{
--tick-color:violet;
}
Example - Vertical Sliders
Sliders will automatically switch to a vertical orientation when the height is greater than the width.
Example of a vertical slider in a Dashboard.