Slider

Category: Controls · Sends commands: yes · Emits a value: yes

Mental model

A Slider is a dimmer knob. As you drag it, it continuously emits its current value — and that value rides along automatically in the command it sends. You don’t wire the number by hand; the device receives it under the value key.

When to use it

Set a level: brightness, speed, temperature setpoint, volume
Any numeric value in a range the user tunes live

Settings

General

Widget Title / ID
Min value · Max value · Default value · step
Custom width

Style

Gradient track, icon color/size, label styling, plus common controls. Optional haptic feedback and value animation.

Triggers

Events (the value-carrying ones auto-inject { "value": <n> }):

Event	Fires when
`slide`	Continuously while dragging
`slideEnd`	When released
`change`	Value changed
`slideStart`	When drag begins
`min` / `max`	At the ends of the range
(common)	`load`, `ready`, `destroy`, `update`, `visible`, `hidden`

The auto-injected value

When a slider fires slide / slideEnd / change, its position is injected into the action’s params as value — merged with any static params you set. See emitted values. Trigger (leave params empty — value arrives automatically):

WHEN     change
SEND TO  Current Device
EXECUTE  Motor
Action   setSpeed   params: {}    ← device receives { "value": <position> }

Firmware (Arduino) — read params["value"]:

device.setUserCommandHandler([](JsonObject &msg) {
  JsonObject p = device.findParams(msg, "Motor", "setSpeed");
  if (!p.isNull()) {
    int speed = p["value"];          // the slider's live position
    analogWrite(MOTOR_PIN, speed);
  }
});

Add extra static params alongside the value — e.g. { "unit": "rpm" } → the device gets { "unit": "rpm", "value": 80 }.

Show the device’s real value

Push the actual value back to the slider’s widget ID to keep it in sync:

device.updateWidget(targetId, "speedSlider", (float)currentSpeed);

Script API example

The same interactions from a dashboard script:

widget.on('speedSlider', 'slide', (v) => {
  widget.setText('speedLabel', v + ' rpm');   // live mirror while dragging
});
widget.on('speedSlider', 'slideEnd', (v) => {
  ws.send(context.deviceId, { setSpeed: v }); // send once, on release
});

Emitted values

How the value auto-injects.

Gauge

To display a value instead of set it.

Designer

Widget Reference

Mental model

When to use it

Settings

General

Style

Triggers

The auto-injected value

Show the device’s real value

Script API example

Emitted values

Gauge

​Mental model

​When to use it

​Settings

​General

​Style

​Triggers

​The auto-injected value

​Show the device’s real value

​Script API example

Emitted values

Gauge

Mental model

When to use it

Settings

General

Style

Triggers

The auto-injected value

Show the device’s real value

Script API example