Slider

Picks a number in a range by dragging a thumb or with the arrow keys. Two sizes and five states, with a label and the current value.

Label

Usage

Import the component and render it.

import { Slider } from 'src/components/Slider/Slider';

<Slider size="sm" value={50} min={0} max={100} step={1} label="Label" showValue />

Accessibility

Role: slider (native <input type="range">, transparent over the drawn Track · Fill · Thumb).

Key	Action
`Arrow Right / Arrow Up`	Increases by one step
`Arrow Left / Arrow Down`	Decreases by one step
`Page Up / Page Down`	Increases / decreases by a larger step
`Home / End`	Sets the minimum / maximum
`Tab`	Moves focus to the slider (shows the Focus state via :focus-visible)

A native range input: keyboard, touch and form submission work without JavaScript.
The Label names the slider (aria-labelledby). Without a label, pass aria-label.
The visible Value is hidden from assistive technology: the slider already announces it.
Clicking anywhere on the Track Container moves the Thumb there.

Size

Set the size prop: Small is "sm", Medium is "md".

Label

Small

Label

Medium

<Slider size="sm" />
<Slider size="md" />

States

Disabled comes from the disabled prop. Hover, Focus and Pressed follow the pointer and the keyboard: try them in the playground.

Label

Default

Label

Disabled

<Slider disabled />

Actions

Pass callbacks to respond to the component.

import { Slider } from 'src/components/Slider/Slider';

<Slider
  size="sm"
  value={50}
  min={0}
  max={100}
  step={1}
  label="Label"
  showValue
  onValueChange={(value) => console.log(value)}
/>

Callback	When
`onValueChange`	Fires while the value changes.