Slider
Allows users to move thumb of a slider to send commands to devices or update attributes/time series data. Configurable settings let users define how to retrieve the initial state and specify actions for the value change.
Who it’s for
Anyone setting a continuous value from a dashboard — a setpoint, a dimmer level, a valve position, a target speed. The operator is choosing a number within a known range, and dragging to it is faster and less error-prone than typing it.
What it does
The Slider sends a value to the device as the operator drags the thumb along a range. The initial position is fetched by a configured action and each change sends its own, so the control starts from the device’s current setting rather than from zero.
- Drag to a value within a defined range, which prevents out-of-range settings by construction rather than by validation.
- The starting position is read back from the device — an attribute, a telemetry key or an RPC call — so the slider opens showing the current setpoint.
- Range ticks and tick marks make the scale explicit, so the operator knows what the ends mean.
- Decimals control the granularity of what is sent, which is what separates a percentage from a precise setpoint.
- Left and right icons caption the ends, which is often clearer than numbers for brightness, speed or volume.
- A disabled condition greys the control out, so a setpoint cannot be changed while a condition holds.
- The Slider sends on change: it has no confirm step, so a control where the wrong value is expensive belongs on a stepper or a button.
How to set up
Data keys
The Slider takes no data keys — its value and commands come from its configured actions.
| Attribute | Scope | Operation | Description |
|---|---|---|---|
| Configured key | Any for read, Shared / Server for write | Read + Write | With Initial value set to Get attribute the slider reads this key; with On value change set to Set attribute it writes it. |
| Method | Direction | Parameters | Sent when |
|---|---|---|---|
| Value change method | One-way or two-way, as configured | The slider’s value, or the result of a convert function | Whenever the operator changes the slider |
Range
| Setting | Default | Effect |
|---|---|---|
| Initial value | Unset | How the starting position is fetched |
| On value change | Unset | The action triggered when the value changes |
| Range min / max | 0 / 100 | The ends of the slider |
| Value decimals | 0 | The precision of the value sent and displayed |
| Range ticks | Off | Prints the end values |
| Tick marks | Off | Draws marks along the track |
| Disabled state | Unset | An action deciding when the control is greyed out |
Set the range to what the device will actually accept. The slider cannot send a value outside it, which is the main safety this control provides — and a range wider than the device’s makes that protection meaningless.
How to customize
- To start from the device’s current setting — set Initial value to the action matching how the device reports its setpoint.
- To command the device — set On value change to an RPC call, an attribute write or a time series write.
- To constrain what can be sent — set Range min and Range max to the device’s real limits.
- To control granularity — set the value decimals, which decides both what is displayed and what is sent.
- To make the scale explicit — turn on Range ticks, and Tick marks where intermediate positions matter.
- To caption the ends — set the Left icon and Right icon, which read faster than numbers for brightness or speed.
- To block changes under a condition — configure the Disabled state action.
- To match the card — set the Colors for the main and background track, and the disabled state’s own pair.
Tips
- Set the decimals to the precision the device actually honours. A slider offering two decimals on a device that rounds to whole numbers sends values that come straight back changed, and operators read that as the control fighting them.
- Choose a stepper over a slider when each change costs something — a physical actuator movement, a metered command, a device that wakes on receipt. A slider fires on every change during a drag, which is exactly wrong for anything expensive.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.