Skip to main content
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> }):
EventFires when
slideContinuously while dragging
slideEndWhen released
changeValue changed
slideStartWhen drag begins
min / maxAt 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.