Slide to Unlock
A confirmation control that only fires once the thumb is dragged all the way, preventing accidental taps.
A mis-tap-proof control that only confirms once the thumb has been dragged all the way — a good fit for irreversible actions such as payments and deletions. Releasing before the threshold springs back, and on success the thumb snaps to the end and shows a checkmark, while the hint text on the track has a shimmer highlight sweeping across it. Arrow keys can advance it from the keyboard.
Loading preview…
npx shadcn@latest add https://webberui.com/r/slide-to-unlock.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
0.9
2000
<SlideToUnlock />
Installation
npx shadcn@latest add https://webberui.com/r/slide-to-unlock.jsonOr, once registries are configured in components.json, install it as @webberui/slide-to-unlock.
Usage
import { SlideToUnlock } from "@/components/ui/slide-to-unlock";
<SlideToUnlock
label="Slide to confirm payment"
successLabel="Payment confirmed"
onConfirm={() => submitPayment()}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "滑動解鎖" | The shimmering hint text in the middle of the track |
successLabel | string | "已確認" | Text shown after a successful unlock |
threshold | number | 0.9 | The drag ratio (0 to 1) required to confirm; releasing before it springs back |
onConfirm | () => void | — | Called when the thumb reaches the end (exactly once per unlock) |
resetDelay | number | 0 | Delay before resetting automatically after success (milliseconds); 0 means it stays unlocked |
disabled | boolean | false | Disables interaction (both dragging and the keyboard) |
className | string | — | Merged onto the outermost track |
Accessibility
- The thumb is a button with
role="slider"that reports the progress percentage live througharia-valuenow/aria-valuetext - Full keyboard support:
→/↑advance,←/↓go back (10% each),Endunlocks immediately,Homereturns to zero - A successful unlock is announced through
aria-live="polite"with the success text - When the user has "reduce motion" enabled at the system level, the shimmer sweep is turned off and the spring back and the snap become near-instant positioning