184 Components
Elastic Swipe Slider
ButtonsSwipe-to-confirm slider control with gesture resistance, rubber-band recoil physics, and a morphing confirmation checkpoint.
Slide to Confirm
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/elastic-swipe-slider.json"
Props
TypeScript props supported by <ElasticSwipeSlider />.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to Confirm" | Resting instruction label. |
| confirmedLabel | string | "Confirmed" | Label shown upon reaching 85%+ swipe threshold. |
| onConfirm | () => void | — | Callback fired when the slider is triggered. |
| width | number | 280 | Track width in pixels. |
| disabled | boolean | false | Disables drag interaction when true. |
Key Features
- Horizontal drag gesture with elastic boundary resistance and spring recoil on abort.
- Progressive opacity decay on the track label as the thumb approaches trigger threshold.
- Animated transformation into an emerald confirmed badge with reset capability.
- Customizable width, labels, and confirmation callbacks.
Keyboard & Accessibility
- Full mouse and touch drag gesture compatibility.
- Keyboard accessible via reset button.
- Reduced motion safeguards on confirmation scale transitions.