Skip to content
Stand with Ukraine flag

Slider

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
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.

Widget Type
  • Control
Category
  • Controls

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.

AttributeScopeOperationDescription
Configured keyAny for read, Shared / Server for writeRead + WriteWith Initial value set to Get attribute the slider reads this key; with On value change set to Set attribute it writes it.
MethodDirectionParametersSent when
Value change methodOne-way or two-way, as configuredThe slider’s value, or the result of a convert functionWhenever the operator changes the slider

Range

SettingDefaultEffect
Initial valueUnsetHow the starting position is fetched
On value changeUnsetThe action triggered when the value changes
Range min / max0 / 100The ends of the slider
Value decimals0The precision of the value sent and displayed
Range ticksOffPrints the end values
Tick marksOffDraws marks along the track
Disabled stateUnsetAn 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.