Spring Slider

Volume40%

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/spring-slider.json

import { SpringSlider } from '@/components/matos-ui/spring-slider'

const [value, setValue] = useState(40)

<SpringSlider value={value} onValueChange={setValue} />

Prop	Type	Default	Description
`value`	`number`	-	Controlled value.
`defaultValue`	`number`	`50`	Initial value when uncontrolled.
`onValueChange`	`(value: number) => void`	-	Fires when the value changes.
`min`	`number`	`0`	Minimum value.
`max`	`number`	`100`	Maximum value.
`step`	`number`	`1`	Snap increment.
`size`	`"sm" \| "md" \| "lg" \| "full"`	`"md"`	Maximum width preset.
`stiffness`	`number`	`380`	Spring stiffness for the fill and thumb.
`damping`	`number`	`24`	Spring damping for the fill and thumb.