Slider

The Slider component lets users select a single value or a range from a bounded interval. Built on Radix UI Slider with OKLCH-themed tokens, it supports single/range modes, keyboard navigation, and vertical orientation.

Import

import { Slider } from '@nim-ui/components';

Basic Usage

Code

<Slider defaultValue={[50]} min={0} max={100} step={1} />

Range Slider

Pass two values in defaultValue to enable range selection:

Code

<Slider defaultValue={[20, 80]} min={0} max={100} step={5} />

Sizes

Code

<Slider defaultValue={[50]} size="sm" />
<Slider defaultValue={[50]} size="md" />
<Slider defaultValue={[50]} size="lg" />

Controlled

const [value, setValue] = useState([30]);

return (
  <Slider
    value={value}
    onValueChange={setValue}
    min={0}
    max={100}
  />
);

Vertical

<Slider
  defaultValue={[50]}
  orientation="vertical"
  className="h-32"
/>

Props

Name	Type	Default	Description
`value`	`number[]`	-	Controlled value(s). Provide [value] for single, [min, max] for range
`defaultValue`	`number[]`	-	Uncontrolled initial value
`onValueChange`	`(value: number[]) => void`	-	Callback fired when the value changes
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant for track and thumb
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Slider orientation
`disabled`	`boolean`	`false`	Disable the slider

Accessibility

Thumbs have role="slider" with aria-valuemin, aria-valuemax, aria-valuenow
Range sliders label thumbs as "Minimum value" and "Maximum value" by default
Override with the standard aria-label prop on the root when you need a custom label like "Volume"
Full keyboard support: Arrow keys, Page Up/Down, Home/End
No motion to reduce: the thumb tracks the pointer directly and its only transition is a colour crossfade, so there is nothing for prefers-reduced-motion to switch off

Keyboard Support

Key	Action
Arrow Right / Up	Increase value by one step
Arrow Left / Down	Decrease value by one step
Page Up	Increase by larger step
Page Down	Decrease by larger step
Home	Go to minimum
End	Go to maximum

On this page