Slider

A slider component built on Base UI's Slider primitive. It supports single-value and range (multi-thumb) modes, horizontal and vertical orientations, and renders a track with an indicator and draggable thumb controls.

import { Slider } from "@/components/ui/slider"

export default function SliderDemo() {
  return (
    <Slider defaultValue={[50]} max={100} className="w-60" />
  )
}

Anatomy

import { Slider } from "@/components/ui/slider"

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

Examples

Single value

<Slider defaultValue={[30]} max={100} step={1} />

Range slider

Pass a two-element array to enable range selection with two thumbs.

<Slider defaultValue={[25, 75]} max={100} step={1} />

Custom step and bounds

<Slider defaultValue={[5]} min={0} max={10} step={0.5} />

Disabled

<Slider defaultValue={[50]} max={100} disabled />

API Reference

Slider

The root slider component. Renders a track, indicator, and one thumb per value.

Prop	Type	Default	Description
`value`	`number[]`	—	The controlled value(s).
`defaultValue`	`number[]`	—	The initial uncontrolled value(s).
`min`	`number`	`0`	The minimum allowed value.
`max`	`number`	`100`	The maximum allowed value.
`step`	`number`	`1`	The step increment between values.
`disabled`	`boolean`	`false`	Whether the slider is disabled.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The slider axis.
`onValueChange`	`(value: number[]) => void`	—	Callback when the value changes.
`className`	`string`	—

Accepts all props from Base UI's Slider.Root.