Slider

Preview

Value: 50%

Installation

npx skeci-ui add slider

Usage

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

<Slider
  defaultValue={[50]}
  max={100}
  step={1}
  onValueChange={(value) => console.log(value)}
/>

Variants

Default

Steps (10)

Disabled

Props

Prop	Type	Default	Description
value	number[]	—	The controlled value of the slider.
defaultValue	number[]	[0]	The value of the slider when initially rendered.
onValueChange	(value: number[]) => void	—	Callback fired when the value changes.
min	number	0	The minimum value of the slider.
max	number	100	The maximum value of the slider.
step	number	1	The granularity of the slider.
disabled	boolean	false	Whether the slider is non-interactive.