---
title: Slider
url: "https://native-sdk.dev/docs/components/slider"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use `slider` to adjust a fraction from 0 to 1. Bind `value` to the model and handle `on-change` after dragging, keyboard adjustments, or an accessibility set-value action. A message with one numeric payload receives the applied fraction; a message without a payload reports only that a change occurred.

For controlled state, store the fraction in `update` and bind it back to `value`. A changed model value overrides retained state. Repeating the same source value preserves a user adjustment, and a live drag is not interrupted by reconciliation. For a display-only bar, use [progress](/docs/components/progress).

## Markup

```html
<column gap="20" width="280">
  <slider value="{volume}" on-change="volume_changed" label="Volume" />
  <slider value="0.7" disabled="true" label="Balance" />
</column>
```

With a one-number float arm — `{ kind: "volume_changed"; fraction: number }` in a TypeScript core, `volume_changed: f32` in a Zig core — the arm receives the applied fraction directly (the `examples/soundboard` seek bar is the live pattern):

```ts
// in update: the value event delivers the applied fraction
case "volume_changed":
  return { ...model, volume: msg.fraction };
```

```zig
// in update: the value event delivers the applied fraction
.volume_changed => |fraction| model.volume = fraction,
```

A void `volume_changed` arm keeps the older plain form; the `Options.sync` hook remains available to Zig apps that mirror runtime widget state wholesale.

## Programmatic construction (Zig)

In a Zig view, the `canvas.Ui` builder constructs the same tree programmatically; `on_value = Ui.valueMsg(.tag)` is the value channel:

```zig
ui.column(.{ .gap = 20, .width = 280 }, .{
    ui.el(.slider, .{
        .value = model.volume,
        .on_value = Ui.valueMsg(.volume_changed),
    }, .{}),
    ui.el(.slider, .{ .value = 0.7, .disabled = true, .semantics = .{ .label = "Balance" } }, .{}),
})
```

## Attributes

| Attribute   | Description                                                                                                                                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value`     | Value for slider/progress/text entry; a literal or one \{binding}.                                                                                                                                                           |
| `disabled`  | Disables the control; true/false or a \{binding}.                                                                                                                                                                            |
| `on-change` | Dispatch a Msg on change: tag or tag:\{payload}. Hit-target elements only. On a treeitem, Up/Down/Left/Right/Home/End focus movement prefers on-change over on-press, separating keyboard selection from pointer activation. |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)