Skip to main content
Slider component preview (light)
  • Location: sabo/src/components/ui/slider.tsx

​
When to use

  • Choose a value or range visually (volume, price range).
  • Use inputs for exact values; Sliders are great for exploration.

​
Usage

sabo/src/components/ui/slider.tsx
import { Slider } from "@/components/ui/slider";

export function Example() {
  return <Slider defaultValue={[20, 80]} className="w-64" />;
}

​
Key props

​
value
number[]
Controlled values (single or range). Use defaultValue for uncontrolled.
​
min
number
default:"0"
Minimum value.
​
max
number
default:"100"
Maximum value.
This component forwards all props from Radix Slider primitives (Root/Thumb/Track, etc.). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/slider

​
Styling tip

  • Adjust orientation via CSS classes; vertical sliders need a fixed height.
  • Thicken the track with data-[orientation=horizontal]:h-2.

​
Accessibility

  • Provide a nearby label and current value when the context isn’t obvious.