Svelte Swipe To Action
A highly customizable swipe-to-action component for Svelte 5
npm i svelte-swipe-to-action Preview
Slide to confirm
Confirmed!
STATUS
pending
VALUE
0
HOLD
no
THRESHOLD
below
Events
Interact with the slider to see events
Options
{
"width": 400,
"height": 56,
"threshold": 75,
"label": "Slide to confirm",
"completeLabel": "Confirmed!",
"trackColor": "#f3f4f6",
"completeTrackColor": "#22c55e",
"trackBorderColor": "#d1d5db",
"trackBorderWidth": 1,
"trackRadius": 10,
"thumbColor": "#6b7280",
"completeThumbColor": "#16a34a",
"thumbRadius": 8,
"labelColor": "#6b7280",
"completeLabelColor": "#ffffff",
"labelSize": "md"
}Usage
<script lang="ts">
import Swipe from 'svelte-swipe-to-action';
import type { SwipeOptions } from 'svelte-swipe-to-action';
let status = $state(false);
const opts: SwipeOptions = {
"width": 400,
"height": 56,
"threshold": 75,
"label": "Slide to confirm",
"completeLabel": "Confirmed!",
"trackColor": "#f3f4f6",
"completeTrackColor": "#22c55e",
"trackBorderColor": "#d1d5db",
"trackBorderWidth": 1,
"trackRadius": 10,
"thumbColor": "#6b7280",
"completeThumbColor": "#16a34a",
"thumbRadius": 8,
"labelColor": "#6b7280",
"completeLabelColor": "#ffffff",
"labelSize": "md"
};
</script>
<Swipe
options={opts}
bind:status
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | boolean | false | Two-way bindable confirmed state |
| value | number | 0 | Current slider value (0-100) |
| hold | boolean | false | Whether slider is being held |
| options | SwipeOptions | — | All appearance and layout props |
| chevronIcon | Snippet | chevron | Custom thumb icon |
| completeIcon | Snippet | checkmark | Custom completed icon |
Events
| Event | Signature | Description |
|---|---|---|
| oninput | (event: Event, value: number) | Fires continuously while the slider is being dragged |
| oncomplete | (event: Event, isComplete: boolean, value: number) | Fires when the slider is released above the threshold |
| oncancel | (event: Event, isComplete: boolean, value: number) | Fires when the slider is released below the threshold |
| onpassthreshold | (event: Event, side: boolean, value: number) | Fires when the slider crosses the threshold in either direction (side: true = forward) |
Swipe Options
All properties in the options object:
| Option | Type | Default | Description |
|---|---|---|---|
| width | number | 400 | Slider width in pixels |
| height | number | 50 | Slider height in pixels (also sets thumb size) |
| threshold | number | 80 | Percentage (0-100) of slide required to confirm |
| label | string | Slide to ... | Text shown on the slider before completion |
| completeLabel | string | Complete | Text shown after the slider is confirmed |
| rtlMode | boolean | false | Enables right-to-left sliding direction |
| trackColor | string | #fff | Background color of the slider track |
| completeTrackColor | string | #4caf50 | Track background color after confirmed |
| trackBorderColor | string | transparent | Border color of the track |
| trackBorderWidth | number | 1 | Track border width in pixels |
| trackRadius | number | 0 | Track border radius in pixels |
| trackClass | string | — | Additional CSS class for the track |
| completeTrackClass | string | — | CSS class for the track when confirmed |
| thumbColor | string | #ddd | Color of the slider thumb (handle) |
| completeThumbColor | string | #ddd | Thumb color after confirmed |
| thumbRadius | number | 0 | Thumb border radius in pixels |
| labelColor | string | #000 | Text color of the label |
| labelClass | string | — | Additional CSS class for the label |
| completeLabelColor | string | #000 | Text color of the completed label |
| completeLabelClass | string | — | Additional CSS class for the completed label |
| labelSize | string | 'md' | Text size preset: 'xs', 'sm', 'md', 'lg', 'xl'. Scales with height |