Slider

A component for selecting a value from a range with draggable thumb and optional range.

Installation

npx micomponents-cli add slider

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

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

Select a range with two thumbs.

Selected: 20 - 80

Set custom step values for the slider.

Value: 50

Prop	Type	Default	Description
defaultValue	number[]	[50]	The default value of the slider
min	number	0	The minimum value of the slider
max	number	100	The maximum value of the slider
step	number	1	The step size when moving the slider