Slider

Inputs

Range slider whose fill and thumb follow the value on a spring.

Installation

Add it with the shadcn CLI:

$pnpm dlx shadcn@latest add https://nawalkattel.com.np/r/slider.json

Or install manually

1. Install dependencies
```
pnpm add motion clsx tailwind-merge
```
2. Copy the component source into components/library/slider.tsx

Props

Prop	Type	Default	Description
value	number	50	Initial value, 0 to 100.
onChange	(value: number) => void	-	Called with the new value as it moves.

Accessibility

A real <input type=range> sits on top, so keyboard and screen readers work.
The visual track and thumb are decoration over that native control.
Carries an aria-label; pass a visible label alongside it where possible.

Dependencies

motionclsxtailwind-merge