Slider

Sliders allow users to select a value or range from a continuous scale. Built on top of Radix UI primitives for accessibility.

Basic Usage

import { Slider } from '@/components'

<Slider defaultValue={60} />

With Tooltip

Show a percentage tooltip above the thumb when dragging.

<Slider defaultValue={60} showTooltip />

Range Slider

Use a range slider to select a range of values with two thumbs.

<Slider defaultRangeValue={[30, 60]} />

Range with Tooltip

<Slider defaultRangeValue={[30, 60]} showTooltip />

Disabled

Disabled sliders cannot be interacted with and display a muted appearance.

<Slider defaultValue={50} disabled />
<Slider defaultRangeValue={[25, 75]} disabled />

Controlled

You can control the slider value externally using controlled props.

Single Value

const [value, setValue] = useState(50)

<Slider
  value={value}
  onValueChange={setValue}
  showTooltip
/>

Range

const [value, setValue] = useState<[number, number]>([20, 80])

<Slider
  rangeValue={value}
  onRangeValueChange={setValue}
  showTooltip
/>

Custom Range

Customize the min, max, and step values.

<Slider
  defaultValue={500}
  min={0}
  max={1000}
  step={50}
  showTooltip
/>

All Variants

Accessibility

• Built on Radix UI Slider primitive for robust accessibility
• Full keyboard support (Arrow keys, Home, End)
• Proper ARIA attributes for screen readers
• Supports aria-label and aria-labelledby for labeling
• Focus states are clearly visible

API Reference

Slider Props