Slider

An input for selecting a value from a range.

Preview

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/slider.json

Usage

tsx
5 lines
1
2
3
4
5
import { Slider } from "@/components/ui/slider"

export default function MyComponent() {
  return <Slider defaultValue={[33]} max={100} step={1} />
}

Examples

With Value Display

Range Slider

Disabled

With Custom Step

20