Interactive slider inspired by the classic iPhone “slide to unlock” gesture.
Installation
Install dependencies
Install the required packages for this component:
Copy the Source Code
Copy and paste the following code into your project:
Usage
Features
- Smooth drag interaction with spring physics via Motion Svelte
- Composable compound components (track, handle, text)
- Customizable handle and colors
- Built-in shimmering text effect
Examples
Basic
Run a callback when the handle reaches the end of the track.
Waiting for the gesture
Reset
Return the handle to its starting position with the reset method.
Custom prompt
Change the instruction while the handle is being dragged.
Custom handle
Provide custom handle content, colors, and drag width.
Custom handle with a 48px drag width
Confirm action
Replace a one-time confirmation gesture with completion feedback.
Async action
Show processing and success states after the gesture completes.
Destructive confirmation
Add deliberate friction before a destructive action.
Props
SlideToUnlock
Root provider for the slide-to-unlock interaction.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | Track, text, and handle composition rendered inside the root. |
handleWidth | number | 56 | Width of the draggable handle in pixels. |
onUnlock | () => void | undefined | Called when the handle reaches the end of the track. |
ref | HTMLDivElement | null | null | Bindable reference to the root element. |
class | string | undefined | Additional classes applied to the root element. |
SlideToUnlockTrack
Track that supplies the drag constraint boundary.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | Text and handle content rendered inside the track. |
ref | HTMLDivElement | null | null | Bindable reference to the track element. |
class | string | undefined | Additional classes applied to the track. |
SlideToUnlockText
Instruction text that fades with drag progress.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet<[{ isDragging: boolean }]> | required | Text renderer receiving the current dragging state. |
style | MotionStyleProps | undefined | Additional Motion style values merged with the progress styles. |
ref | HTMLDivElement | null | null | Bindable reference to the text element. |
class | ClassValue | undefined | Additional classes applied to the text element. |
SlideToUnlockHandle
Draggable handle with a built-in arrow fallback.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | default arrow | Optional custom content rendered inside the handle. |
style | MotionStyleProps | undefined | Additional Motion style values merged with the drag styles. |
ref | HTMLDivElement | null | null | Bindable reference to the handle element. |
class | ClassValue | undefined | Additional classes applied to the handle. |