Slider

An input where the user selects a value from within a given range.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/slider.json

Use for volume, price ranges, and other continuous values. Pass a single value or a range via arrays.

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

export function Example() {
  return <Slider defaultValue={[50]} max={100} step={1} />;
}

For a range, use two values: defaultValue={[25, 75]}. Control with value and onValueChange.