# Slider

Pick a value or a range by dragging thumbs along a track, with full keyboard support.

```ehtml Example
import { Slider, SliderValue } from "@elements/ui/slider";

<Slider value={form.volume} label="Volume" />
<Slider value={filters.price} max={500} step={10} minStepsBetweenThumbs={2} name="price" />
<Slider value={eq.bass} orientation="vertical" label="Bass" />
```

## Parts

| Part | What it is |
|---|---|
| `.slider` | The root, role=group. |
| `.slider-control` | The pressable area around the track. |
| `.slider-track` | The full range. |
| `.slider-range` | The filled part, from min or between the outer thumbs. |
| `.slider-thumb` | One per value, drawn. |
| `.slider-thumb-input` | The range input inside each thumb: the focusable slider, unseen. Assistive tech sets it like any range input (reason input-change). |
| `.slider-mark` | A tick inside the track at one of marks, aria-hidden. |
| `.slider-mark-labels` | The row of mark labels, aria-hidden. |
| `.slider-value` | SliderValue: the value as text in an output element. |
| `.slider-input` | Hidden inputs that carry the values to a form and a Field; they fire input on a change and change on a commit. |

## Attributes

| Attribute | Type | Default | Description |
|---|---|---|---|
| `value` | `number[]` (two-way) | `[0]` | One number per thumb: [50] is one thumb, [20, 80] a range. |
| `min` | `number` | `0` | The lowest value. |
| `max` | `number` | `100` | The highest value. |
| `step` | `number` | `1` | Values snap to multiples of step from min. |
| `largeStep` | `number` | `0` | PageUp, PageDown and Shift+arrow amount. 0 means ten steps. |
| `minStepsBetweenThumbs` | `number` | `0` | The smallest gap between two thumbs, in steps. |
| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Track direction. A vertical slider fills its container's height. |
| `dir` | `"ltr" \| "rtl" \| ""` | `""` | Reading direction; empty follows the page. Under rtl the slider runs right to left. |
| `inverted` | `boolean` | `false` | Runs from max to min. |
| `disabled` | `boolean` | `false` | Not interactive; thumbs leave the tab order. |
| `disabledThumbs` | `number[]` | `[]` | Indexes of thumbs that cannot move. |
| `marks` | `number[]` | `[]` | Values to draw a tick at inside the track. Pair with step to snap to them. |
| `markLabels` | `boolean` | `false` | Prints each mark's formatted value under the track. |
| `invalid` | `boolean` | `false` | Marks the thumbs aria-invalid and draws the danger color. |
| `thumbAlignment` | `"center" \| "edge"` | `"center"` | edge keeps the thumbs inside the track at min and max. |
| `thumbCollisionBehavior` | `"push" \| "swap" \| "none"` | `"push"` | What a dragged thumb does when it meets another: push it, pass it, or stop. |
| `name` | `string` | `""` | Submits each value with the form; name[] for several. |
| `form` | `string` | `""` | The id of the form the values belong to. |
| `label` | `string` | `""` | Accessible name for the thumbs. A range adds minimum and maximum. |
| `getAriaLabel` | `((index: number) => string) \| null` | `null` | Accessible name per thumb. |
| `getAriaValueText` | `((formatted: string, value: number, index: number) => string) \| null` | `null` | What a screen reader says for a value. |
| `format` | `Intl.NumberFormatOptions` | `{}` | Formats the spoken value (percent, currency, units). |
| `locale` | `string` | `""` | Locale for format; empty uses the browser's. |
| `class` | `string` | `""` | Extra classes on the root. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Attributes for the root: id, data-\*. |
| `onValueChange` | `(value: number[], details: SliderChangeDetails) => void` | `() => {}` | Each change from a press, drag, key or assistive tech setting the range input. details.reason (track-press, drag, keyboard, input-change), details.activeThumbIndex, details.cancel(). |
| `onValueCommit` | `(value: number[], details: SliderCommitDetails) => void` | `() => {}` | When a drag ends or a key moves a thumb, if the value changed. |

## Keyboard

| Keys | Action |
|---|---|
| `ArrowRight / ArrowUp` | Increase by step. ArrowRight decreases under rtl or inverted. |
| `ArrowLeft / ArrowDown` | Decrease by step. |
| `Shift + Arrow` | Change by the large step. |
| `PageUp / PageDown` | Increase or decrease by the large step. |
| `Home / End` | The lowest or highest value the thumb may take. |
| `Tab` | Moves between thumbs. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-orientation` | `"horizontal" \| "vertical"` | root, control, track, range, thumb, SliderValue (with htmlFor) |
| `data-disabled` | present when disabled | root, control, track, range, thumb |
| `data-dragging` | present while dragging | root, control, track, range, thumb, SliderValue (with htmlFor) |
| `data-in-range` | present when the range covers the mark | mark |
| `data-invalid` | present when invalid | root, control, track, range, thumb |
| `data-focused, data-touched, data-valid` | inside a Field, mirror the Field's state | root |
| `data-dirty` | inside a Field, present while the values differ from the first ones | root |
| `data-thumb-alignment` | `"center" \| "edge"` | root |
| `data-index` | the thumb's index | thumb |
| `data-active` | present on the thumb last moved or focused | thumb |

## Accessibility

- Each thumb holds a native range input (role slider) with aria-valuenow, aria-valuemin, aria-valuemax and aria-orientation, and is a tab stop. A touch screen reader's swipe sets it like any range input.
- In a range, a thumb's aria-valuemin and aria-valuemax are its neighbors' bounds, so a screen reader knows how far it can go (APG multi-thumb).
- Unlabeled range thumbs are named Minimum and Maximum. Inside a Field, the field's label names the thumbs.
- format or getAriaValueText gives the spoken value: "40%" or "$120" rather than a bare number.

## See also

- [NumberInput](number-input): A number field with stepper buttons, keyboard steps, formatting, wheel and scrub.
- [PasswordInput](password-input): A password field with a button that shows and hides what was typed.
- [InputOTP](input-otp): A one-time code in separate slots, with paste, SMS autofill and a pattern.
- [TagsInput](tags-input): Type a list of tags into one field: add, edit, delete and paste them from the keyboard.
- [ColorPicker](color-picker): Pick a color with an area, channel sliders, inputs, swatches and the eye dropper.
- [FileUpload](file-upload): Drop, paste or browse for files; see them listed with previews, sizes, errors and progress.