Slide to unlock
Drag the handle to the end, or use the arrow keys, and the action fires; let go early and it springs back.
Unlocked 0 times
Features
- Drag the handle to the end to fire; let go early and it springs back.
- The handle is a slider for assistive tech: arrow keys move it, End unlocks.
- The label sheens across the track and fades as you slide.
Use it for
- A playful confirm.
- Going home from a 404.
On this site
- 404Slide to go home.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
label | string | The text and the handle's name. |
onUnlock | () => void | Fires at the end. |
Accessibility
- role=slider with a value from 0 to 100 and a spoken value.
- Keyboard: arrows, Home and End.
Source
The code is in src/kit/slide-to-unlock.tsx in runets, MIT licensed.