Slider

npx artui@latest add slider

Playground

Usage

Single thumb with formatted value

import { Slider } from '@/components/slider';

<Slider
  min={0}
  max={1000}
  step={10}
  defaultValue={250}
  aria-label="Maximum price"
  formatValue={(v) => `€${v}`}
/>

Range with per-thumb labels

import { Slider } from '@/components/slider';

<Slider
  min={0}
  max={1000}
  step={10}
  defaultValue={[100, 750]}
  aria-label="Price range"
  formatValue={(v) => `€${v}`}
  thumbs={[
    { 'aria-label': 'Minimum price' },
    { 'aria-label': 'Maximum price' },
  ]}
/>

Each thumb in thumbs must carry an accessible name. Omitting both aria-label and aria-labelledby is a TypeScript compile error.

Controlled

import { Slider } from '@/components/slider';

const [budget, setBudget] = useState(500);

<Slider
  min={0}
  max={1000}
  step={10}
  value={budget}
  onValueChange={setBudget}
  aria-label="Budget"
  formatValue={(v) => `€${v}`}
/>

Non-numeric domain

import { Slider } from '@/components/slider';

const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

<Slider
  min={0}
  max={6}
  step={1}
  defaultValue={1}
  aria-label="Pickup day"
  formatValue={(v) => WEEKDAYS[v]}
/>

formatValue wires the returned string to aria-valuetext automatically so screen readers announce "Monday" instead of "1".

Vertical orientation

import { Slider } from '@/components/slider';

<Slider
  min={0}
  max={100}
  step={1}
  defaultValue={50}
  orientation="vertical"
  aria-label="Volume"
/>

API

SliderProps

SliderProps is a discriminated union: when thumbs is present the component enters range mode and value / defaultValue / onValueChange accept tuples. When thumbs is absent it is single-thumb mode and those props accept scalars.

Range thumb swap

When a range thumb is dragged or moved by keyboard past the other thumb's current value, the component swaps focus and pointer capture to the other thumb so the gesture continues without interruption. No step is lost and no re-press is required.

What the swap guarantees:

• Focus follows the moving value: the thumb now in motion receives focus automatically.
• The full step is always applied: the value does not freeze at the crossing point.
• Screen readers announce the new thumb on focus change, so AT users hear "Minimum price: €300" rather than silence.
• aria-valuemin and aria-valuemax recompute on every render based on current value ordering, so each thumb always reports an accurate range boundary.

Keyboard

In range mode, when any key would push a thumb past the other thumb's value, focus transfers automatically to the other thumb and the full step is applied. Tab order between the two thumbs always follows DOM order (thumbs[0] first, thumbs[1] second), regardless of which has the lower value at that moment.

Accessibility

Do

<Slider
  min={0}
  max={100}
  defaultValue={40}
  aria-label="Download speed limit"
/>

<Slider
  min={0}
  max={1000}
  step={10}
  defaultValue={250}
  aria-label="Maximum price"
  formatValue={(v) => `€${v}`}
/>

<Slider
  min={0}
  max={1000}
  step={10}
  defaultValue={[100, 750]}
  aria-label="Price range"
  thumbs={[
    { 'aria-label': 'Minimum price' },
    { 'aria-label': 'Maximum price' },
  ]}
/>

<Slider
  min={0}
  max={100}
  defaultValue={[20, 80]}
  aria-label="Temperature range"
  formatValue={(v) => `${v}°C`}
  thumbs={[
    { 'aria-label': 'Minimum temperature' },
    { 'aria-label': 'Maximum temperature' },
  ]}
  onValueChange={([a, b]) => setRange([Math.min(a, b), Math.max(a, b)])}
/>

Don't

<Slider
  min={0}
  max={100}
  thumbs={[{}, {}]}
/>

<Slider
  min={0}
  max={1000}
  thumbs={[
    { 'aria-label': 'Minimum price' },
    { 'aria-label': 'Maximum price' },
  ]}
/>

<Slider min={0} max={100} defaultValue={150} aria-label="Speed" />

// incorrect: assumes slot 0 is always the lower bound
const [range, setRange] = useState<readonly [number, number]>([20, 80]);

<Slider
  min={0}
  max={100}
  aria-label="Price range"
  value={range}
  onValueChange={setRange}
  thumbs={[
    { 'aria-label': 'Minimum price' },
    { 'aria-label': 'Maximum price' },
  ]}
/>

const lowerBound = range[0]; // wrong after a cross-over