Skip to content
Stand with Ukraine flag

Value stepper

  • Widget
  • v1.0.0
  • Sep 1, 2026
  • MIT license
  • v4.2+ | Built-in
Value stepper

Allows users to click the buttons 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 each button.

Widget Type
  • Control
Category
  • Controls

Who it’s for

Anyone adjusting a setpoint in defined increments — a thermostat target, a dosing rate, a level in steps. The operator wants to nudge a value up or down by a known amount, and to see the number they are committing to before it changes again.

What it does

The Value stepper shows the current value between a decrement and an increment button, sending a command each time one is pressed. The starting value is fetched by a configured action, and each button sends its own action, so a press moves the value by a fixed step rather than to wherever a finger landed.

  • Discrete steps, not a drag — each press is one deliberate change, which suits anything that costs something to command.
  • The value is displayed between the buttons, so the operator sees exactly what they are setting.
  • The starting value is read back from the device rather than assumed.
  • The step size, the range and the decimals are all configured, so the control matches what the device accepts.
  • Left and right buttons are styled independently, each with its own icon and color palette.
  • A disabled condition greys the control out, and the buttons stop at the range ends by construction.
  • The Value stepper sends one command per press: an operator holding the button generates a series of commands, so a large range is better served by a slider.

How to set up

Data keys

The Value stepper takes no data keys — its value and commands come from its configured actions.

AttributeScopeOperationDescription
Configured keyAny for read, Shared / Server for writeRead + WriteWith Initial state set to Get attribute the stepper reads this key; with the button actions set to Set attribute it writes it.
MethodDirectionParametersSent when
Left button methodOne-way or two-way, as configuredThe new value, or the result of a convert functionOn each press of the left button
Right button methodOne-way or two-way, as configuredThe new value, or the result of a convert functionOn each press of the right button

Range

SettingDefaultEffect
Initial stateUnsetHow the starting value is fetched
Left button clickUnsetThe action performed on the left button
Right button clickUnsetThe action performed on the right button
Min / MaxUnsetThe ends of the range; the buttons stop there
Value increment/decrement stepUnsetHow much one press changes the value by
Value decimals0The precision displayed and sent
Disabled stateUnsetAn action deciding when the control is greyed out

Set the step to a change the equipment can actually act on. A half-degree step on a thermostat with one-degree resolution produces presses that appear to do nothing every other time.

How to customize

  • To start from the device’s current setting — set Initial state to the action matching how the device reports.
  • To command the device — set Left button click and Right button click to their own actions.
  • To constrain the range — set Min and Max, which is where the buttons stop.
  • To change the increment — set the Value increment/decrement step.
  • To control precision — set the value decimals, which decides what is displayed and sent.
  • To distinguish the buttons — set each one’s Icon and color palette, and the disabled colors.
  • To match the card — set the Value box background and Border, and the layout.
  • To block changes under a condition — configure the Disabled state action.

Tips

  • Choose a stepper over a slider whenever a command is expensive — an actuator that physically moves, a metered message, a device that wakes to receive. A slider fires throughout a drag; a stepper fires once per press, and the operator controls exactly how many.
  • Set the step and the decimals together. A step of 0.5 with zero decimals shows the value unchanged after a press, which looks like a control that has stopped responding rather than one that is rounding for display.

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.