Slide to Unlock
Interactive slider inspired by the classic iPhone 'slide to unlock' gesture.
Loading...
Installation
pnpm dlx shadcn@latest add https://jb.desishub.com/r/slide-to-unlock.json
Usage
import {
SlideToUnlock,
SlideToUnlockHandle,
SlideToUnlockText,
SlideToUnlockTrack,
} from "@/components/slide-to-unlock";<SlideToUnlock onUnlock={() => console.log("Unlocked!")}>
<SlideToUnlockTrack>
<SlideToUnlockText>
<span>slide to unlock</span>
</SlideToUnlockText>
<SlideToUnlockHandle />
</SlideToUnlockTrack>
</SlideToUnlock>Props
SlideToUnlock
| Prop | Type | Default | Description |
|---|---|---|---|
handleWidth | number | 56 | Width of the drag handle in pixels. |
onUnlock | () => void | - | Called when handle is dragged to the end. |
Examples
Custom Styled
Loading...
Rounded with Custom Icon
Loading...