Slide to confirm payment
Slide to Unlock
Tactile swipe-to-confirm interaction inspired by Apple iOS design. Features metallic shimmering text, spring drag constraints, active progress fill, and smooth completion state with checkmark draw animation.
Dependencies
Interaction Types
Drag thumb horizontally to 85% threshold
Metallic sweeping shimmer on text
Spring snap-back on release or auto-reset
How to use
import { SlideToUnlock } from "@/components/slide-to-unlock";
export default function Demo() {
const handleConfirm = () => {
console.log("Action confirmed!");
};
return (
<SlideToUnlock
size="md"
label="Slide to confirm payment"
successLabel="Payment Processed"
onConfirm={handleConfirm}
/>
);
}Component Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Slide to confirm" | Text label with animated metallic shimmer sweep |
| successLabel | string | "Confirmed" | Text displayed when successfully confirmed |
| size | "sm" | "md" | "lg" | "md" | Size configuration of track, handle, and typography |
| onConfirm | () => void | Promise<void> | — | Async or sync callback executed when confirmed |
| autoReset | boolean | true | Whether to auto-reset back to initial state after delay |
| autoResetDelay | number | 2500 | Delay in ms before auto-resetting |
| onReset | () => void | — | Called when the slider returns to the locked state |
| disabled | boolean | false | Disables dragging |