Slot UI
3

Slider

PreviousNext

A draggable control for selecting a numeric value within a defined minimum and maximum range.

Loading...
import { Slider } from "@/components/ui/slider";

export default function SliderDemo() {
  return <Slider defaultValue={50} max={100} className="w-full max-w-xs mx-auto" />;
}

Installation

Usage

import { Slider } from "@/components/ui/slider";
<Slider defaultValue={50} max={100} />

Examples

Range

Loading...
import { Slider } from "@/components/ui/slider";

export default function SliderRange() {
  return <Slider defaultValue={[25, 75]} max={100} className="w-full max-w-xs mx-auto" />;
}