Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
pnpm dlx shadcn@latest add @ruixenui-pro/draggable-progress-bar| Prop | Type | Default | Description |
|---|
value | number | 50 | Current value |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step increment for keyboard/drag |
onChange | (value: number) => void | undefined | Callback when value changes |
onDragStart | () => void | undefined | Callback when drag starts |
onDragEnd | (value: number) => void | undefined | Callback when drag ends |
disabled | boolean | false | Whether the slider is disabled |
className | string | undefined | Additional CSS classes |
aria-label | string | "Progress" | Accessible label for the slider |
prefers-reduced-motion preference| Key | Action |
|---|---|
ArrowRight / ArrowUp | Increase by step |
ArrowLeft / ArrowDown | Decrease by step |
PageUp | Increase by step × 10 |
PageDown | Decrease by step × 10 |
Home | Set to minimum |
End | Set to maximum |