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.
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.
| Attribute | Scope | Operation | Description |
|---|---|---|---|
| Configured key | Any for read, Shared / Server for write | Read + Write | With Initial state set to Get attribute the stepper reads this key; with the button actions set to Set attribute it writes it. |
| Method | Direction | Parameters | Sent when |
|---|---|---|---|
| Left button method | One-way or two-way, as configured | The new value, or the result of a convert function | On each press of the left button |
| Right button method | One-way or two-way, as configured | The new value, or the result of a convert function | On each press of the right button |
Range
| Setting | Default | Effect |
|---|---|---|
| Initial state | Unset | How the starting value is fetched |
| Left button click | Unset | The action performed on the left button |
| Right button click | Unset | The action performed on the right button |
| Min / Max | Unset | The ends of the range; the buttons stop there |
| Value increment/decrement step | Unset | How much one press changes the value by |
| Value decimals | 0 | The precision displayed and sent |
| Disabled state | Unset | An 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.