# `slider`

```strand
element slider: node
```

A slider: `slider { value: <-> audio.sink.volume }`. Dragged, it
writes values in its `range`: `slider { value: <-> percent; range: 0,
100 }`. Laid out taller than wide (`width: 24; height: 160`), it runs
upward: its value grows from the bottom (its written `width` and
`height` decide, else its laid-out box; one growing from a written 0,
`width: 0; grow: 1`, runs along that axis; a drag keeps the way it
began).

It takes no children.

Also every prop and event of [`node`](/reference/elements/node.html.md).

| Prop | Type | |
| --- | --- | --- |
| `value` | `<-> float` | Its value, in `range` (0 to 1 when unset), bound two-way; a value outside it is drawn at its nearer end. |
| `range` | `float, float` | The values its ends stand for: `range: 0, 100` (0 to 1 when unset). A drag writes values between them. |
| `track` | `paint` | The paint of the unfilled track. |
| `step` | `float` | A drag moves in whole steps of this, in `range`'s units from its low end (`range: 0, 100; step: 5`), and writes the decimal they spell (`step: 0.1` writes `0.9`, never `0.90000004`); unset, it moves freely. |