Skip to content

Slider ui-slider

Try Demo

Adds a slider to your dashboard that will emit values in Node-RED under msg.payload anytime it's value is changed.

Properties

PropDynamicDescription
GroupDefines which group of the UI Dashboard this widget will render in.
SizeControls the width of the slider with respect to the parent group. Maximum value is the width of the group.
LabelThe text shown to the left of the slider.
Thumb LabelDefined when the thumb of the slider will show. Defaults to 'On Drag'.
Show TicksDefined when the ticks will be visible on the track. Defaults to 'Always'.
Rangemin - 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.
Colormain - 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).
IconsAdd 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.
OutputDefines 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.

PropPayloadStructuresExample Values
Labelmsg.ui_update.classString
Thumb Labelmsg.ui_update.thumbLabeltrue | false | 'always'
Show Ticksmsg.ui_update.showTickstrue | false | 'always'
Range (min)msg.ui_update.minNumber
Range (step)msg.ui_update.stepNumber
Range (max)msg.ui_update.maxNumber
Icon Prependmsg.ui_update.iconPrependString
Icon Appendmsg.ui_update.iconAppendString
Colormsg.ui_update.colorString
Color Trackmsg.ui_update.colorTrackString
Color Thumbmsg.ui_update.colorThumbString
Classmsg.ui_update.classString

Setting Value

You can set the value of the slider by passing in the respective value in msg.payload.

Example - Basic

Example of a sliderExample of a rendered slider in a Dashboard.

Example - Always Show Thumb

Example of a slider with 'Show Thumb' set to 'Always'Example of a slider with 'Show Thumb' set to 'Always'

Example - Show Ticks

Example of a slider with ticks set to 'Always'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.

css
.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.

css
.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 sliderExample of a vertical slider in a Dashboard.