# Slider (/docs/slider)
The `Slider` wraps Ark UI's `Slider` state machine, so keyboard navigation (`←/→`, `Home/End`, `PageUp/PageDown`), RTL flipping, and ARIA wiring come for free. The wrapper layers a styled track / range / thumb, optional **marks**, and a floating **label** that follows each thumb.
Pass a `number` for a single thumb, or a `[number, number]` tuple for a two-thumb [range](#range). The value shape flows through the whole API — the callbacks echo back the same shape.
```tsx
import { Slider } from '@42-central/ui-react/slider';
{/* single thumb */}
{/* two-thumb range */}
```
## Playground [#playground]
## Sizes [#sizes]
Five track thicknesses — `xs` through `xl`. The thumb scales to match.
## Colors [#colors]
Color is orthogonal to the rest of the slider — the accent rides on `data-color` and the range/thumb reference `--c-solid`, so **every palette in the kit flows through for free**, including dark mode and consumer-defined palettes. `brand` is the default; see [Colors](/docs/colors) for the full system.
{COLORS.map((c) => (
{c}
))}
## Marks [#marks]
Pass `marks` to paint dots along the track. Each mark is `{ value, label? }` — the label is rendered below the dot. Marks **don't** restrict input; they're purely visual unless you pair them with a matching `step`.
For a segmented stepper, combine `marks` with `step`:
```tsx
({ value: i }))}
/>
```
## Min, max & step [#min-max--step]
`min`, `max`, and `step` define the value space — nothing here assumes `0–100`. The label, marks, and keyboard steps all read from it, so a fractional `step` and a unit-formatted label compose without extra wiring.
## Range [#range]
Pass a `[number, number]` tuple instead of a single number and the slider renders **two thumbs** with the filled range between them — for price bands, time windows, or any min/max selection. Everything else carries over: each thumb gets its own `label`, marks between the thumbs read as active, and the callbacks hand you back a `[number, number]`.
Use `minStepsBetweenThumbs` to keep the thumbs from crossing or sitting on top of each other.
`testId` lands on the root, and each thumb also gets its own `` `${testId}-thumb-${i}` `` (0-indexed) — handy for asserting against a specific thumb in a range. See the [Testing](/docs/testing) guide.
Controlled, the value stays a tuple end to end — `onChange` receives `[number, number]`, no shape guessing:
```tsx
'use client';
import { useState } from 'react';
import { Slider } from '@42-central/ui-react/slider';
export function PriceRange() {
const [range, setRange] = useState<[number, number]>([25, 60]);
return (
filterByPrice(v)}
minStepsBetweenThumbs={5}
label={(v) => `$${v}`}
/>
);
}
```
## Origin [#origin]
By default the filled range grows from the start of the track. Set `origin="center"` to fill outward from the midpoint — the right shape for balance, pan, or any signed adjustment around a neutral zero.
## Floating label [#floating-label]
`label` accepts any `ReactNode` and floats above the thumb. By default it appears on **hover, focus, or drag** (`showLabelOnHover`). Set it to `never` or `false` to hide it.
> The label must be serializable. To bind it to the current value, drive the slider as a controlled input from a client component (see below).
## Controlled [#controlled]
`onChange` fires on every change (drag, keyboard, click). `onChangeEnd` fires once the interaction settles — use it to debounce expensive work (network calls, expensive re-renders downstream). Drag the example below: **value** tracks every tick, **committed** only updates on release.
A controlled value is also how you wire a dynamic label, since the label has to be computed in the same client tree as the slider:
```tsx
'use client';
import { useState } from 'react';
import { Slider } from '@42-central/ui-react/slider';
export function VolumeSlider() {
const [value, setValue] = useState(50);
return (
commitToServer(v)}
label={`${value}%`}
/>
);
}
```
## Disabled & read-only [#disabled--read-only]
`disabled` dims the track and blocks all interaction. `readOnly` keeps full contrast and stays focusable — so the value is still announced to assistive tech — but rejects changes. Reach for `readOnly` to show a value the user can inspect but not edit.
## Forms [#forms]
Each thumb renders a hidden ``, so a `name` wires the slider into native `