> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider

> A range control that emits its value as it moves — settings, auto-injected value, and firmware.

<Info>
  **Category:** Controls · **Sends commands:** yes · **Emits a value:** yes
</Info>

## 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](/dashboard/triggers#widgets-that-emit-a-value-auto-injected-params).

**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"]`:

```cpp theme={null}
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);
  }
});
```

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

## Show the device's real value

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

```cpp theme={null}
device.updateWidget(targetId, "speedSlider", (float)currentSpeed);
```

## Script API example

The same interactions from a [dashboard script](/script/overview):

```js theme={null}
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
});
```

<CardGroup cols={2}>
  <Card title="Emitted values" icon="arrow-right-arrow-left" href="/dashboard/triggers#widgets-that-emit-a-value-auto-injected-params">
    How the value auto-injects.
  </Card>

  <Card title="Gauge" icon="gauge" href="/dashboard/widgets/gauge">
    To *display* a value instead of set it.
  </Card>
</CardGroup>