Drag to Confirm
A minimalist physical drag-to-confirm slider for high-stakes and destructive actions, equipped with progressive track fill physics, spring snapback resistance, full light/dark theme adaptation, and accessible keyboard controls.
Slide to delete database →
Drag slider or press Enter / Space to trigger
Protects critical databases with explicit drag confirmation
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/drag-to-confirm
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | 'Slide to confirm' | Action instruction text rendered along track |
| confirmedLabel | string | 'Confirmed ✓' | Text shown when slider locks into completion |
| actionType | 'delete' | 'archive' | 'confirm' | 'submit' | 'unlock' | 'continue' | 'confirm' | Action preset style and icon archetype |
| variant | 'default' | 'danger' | 'warning' | 'info' | 'success' | undefined | Visual tone variant override |
| size | 'sm' | 'md' | 'lg' | 'md' | Slider dimension profile (sm: 40px, md: 48px, lg: 54px) |
| icon | React.ReactNode | undefined | Custom idle state icon rendered inside thumb |
| confirmedIcon | React.ReactNode | undefined | Custom confirmed state icon rendered inside thumb |
| isConfirmed | boolean | undefined | Controlled confirmation state |
| onConfirm | () => void | undefined | Callback triggered upon successful confirmation completion |
| onReset | () => void | undefined | Callback triggered upon slider reset |
| autoResetDelay | number | 2500 | Milliseconds before resetting back to start (0 to disable) |
| haptic | boolean | true | Triggers subtle vibration feedback upon confirmation |
| disabled | boolean | false | Disables slider gesture and interaction |