# Slider

> The everyday slider: a soft track, a white knob with a real shadow and a halo on hover, and a value bubble that rises over the thumb you're dragging. One thumb or a range, a formatted readout in the label row, ticks that light up inside the fill, mark labels you can click to jump to, and icons at either end. Built on Base UI, with arrows, Page Up/Down, Home/End, form submission and aria-valuetext.

- Slug: `slider`
- Category: [Sliders](https://www.assembli.design/category/sliders.md)
- Type: component
- Tags: slider, range, range-slider, marks, volume, form, shadcn, base-ui
- npm dependencies: @base-ui/react
- shadcn/ui dependencies: none
- Live preview: https://www.assembli.design/preview/slider
- Page: https://www.assembli.design/components/slider

![Slider preview](https://www.assembli.design/thumbnails/slider-light.png)

## Props

Other props pass through to the root element.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` |  | A number for one thumb, an array for a range (one thumb per entry). |
| `defaultValue` | `Value` |  |  |
| `onValueChange` | `(value: Value) => void` |  |  |
| `label` | `React.ReactNode` |  |  |
| `showValue` | `boolean` |  | Shows the formatted value at the end of the label row. |
| `formatValue` | `(value: number) => string` |  | Turns a number into text for the header, the bubble over the thumb and `aria-valuetext`. Defaults to `format`. |
| `marks` | `SliderMark[]` |  | Points along the track. Ticks sit on the track; labelled ones print underneath and jump there when clicked. |
| `tooltip` | `"hover" \| "always" \| "never"` | `"hover"` | `hover` shows a value bubble over the thumb on hover, focus and drag; `always` keeps it up; `never` hides it. |
| `startAdornment` | `React.ReactNode` |  | An icon or text before the track, such as a quiet speaker. |
| `endAdornment` | `React.ReactNode` |  | An icon or text after the track, such as a loud speaker. |
| `thumbLabels` | `string[]` |  | One accessible name per thumb, for ranges. Defaults to "Minimum" and "Maximum". |
| `className` | `string` |  |  |

## Install

One-time setup (needs a subscription):

1. Add the registry to the project's `components.json`: `{"@assembli":{"url":"https://www.assembli.design/r/{name}.json","headers":{"Authorization":"Bearer ${ASSEMBLI_API_KEY}"}}}` (merge into `"registries"`).
2. Put an API key from https://www.assembli.design/account in `.env.local` as `ASSEMBLI_API_KEY=asm_…`.

Then install with the shadcn CLI (writes `components/slider/slider.tsx` and installs dependencies):

```bash
npx shadcn@latest add @assembli/slider
```

Registry item JSON: https://www.assembli.design/r/slider.json (send `Authorization: Bearer <api key>`)

## Code

> Component source needs an Assembli subscription ($12/month or $96/year) and an API key sent as `Authorization: Bearer <key>`. To get one without copying anything, POST https://www.assembli.design/api/agent/login (or call the MCP tool connect_account), show the user the link it returns, and poll https://www.assembli.design/api/agent/token for the key. Or subscribe at https://www.assembli.design/pricing and create a key at https://www.assembli.design/account.