Svelte-Swipe-To-Action

A highly customizable swipe-to-action component for Svelte applications.

Table of Contents

• Introduction
• Installation
• Basic Usage
• Props
  • State Props
  • Appearance Props
  • Event Handlers
  • Custom Icons
• Examples
• Development
• License

Introduction

Svelte-Swipe-To-Action is a versatile slider component for Svelte applications building on a html input element type range, that provides "swipe to unlock" or "swipe to confirm" functionality. It's fully customizable with extensive styling options and event callbacks.

Installation

npm install svelte-swipe-to-action

or

pnpm i svelte-swipe-to-action

Basic Usage

<script>
    import Swipe from 'svelte-swipe-to-action';

    let status = false;

    function handleComplete(event, isComplete, value) {
        console.log('Action completed!', isComplete, value);
    }
</script>

<Swipe
    bind:status
    label="Slide to confirm"
    completeLabel="Confirmed!"
    oncomplete={handleComplete}
/>

Props

State Props

Appearance Props

Container

Track

Thumb

Label

Event Handlers

Custom Icons

Examples

Basic Slide to Unlock

<script>
    import Swipe from 'svelte-swipe';
    let unlocked = false;
</script>

<Swipe
    bind:status={unlocked}
    label="Slide to unlock"
    completeLabel="Unlocked!"
    completeTrackColor="#4caf50"
    threshold={75}
/>

{#if unlocked}
    <p>Device unlocked!</p>
{/if}

Custom Styled Slider

<script>
    import Swipe from 'svelte-swipe';
    let confirmed = false;
</script>

<Swipe
    bind:status={confirmed}
    width={300}
    height={60}
    containerRadius={30}
    containerBorderWidth={2}
    containerBorderColor="#ddd"
    trackRadius={28}
    trackColor="#f5f5f5"
    completeTrackColor="#007bff"
    thumbColor="#007bff"
    completeThumbColor="#fff"
    thumbRadius={28}
    label="Swipe to confirm"
    completeLabel="Confirmed!"
    labelColor="#666"
    completeLabelColor="#fff"
/>

With Custom Icons

<script>
    import Swipe from 'svelte-swipe';
    import { HandSwipeRight, Heart } from 'phosphor-svelte';
</script>

<Swipe label="Slide to confirm" completeLabel="Done!">
    {#snippet chevron()}
        <HandSwipeRight />
    {/snippet}
    {#snippet checkMark()}
        <Heart color="HotPink" weight="fill" />
    {/snippet}
</Swipe>

With Event Handlers

<script>
    import Swipe from 'svelte-swipe';
    let message = '';

    function handleComplete(event, isComplete, value) {
        message = 'Action completed!';
    }

    function handleCancel(event, isComplete, value) {
        message = 'Action canceled!';
    }

    function handleThreshold(event, side, value) {
        message = side ? 'Passed threshold' : 'Below threshold';
    }
</script>

<Swipe
    oncomplete={handleComplete}
    oncancel={handleCancel}
    onpassthreshold={handleThreshold}
    label="Slide to submit"
    completeLabel="Submitted!"
/>

<p>{message}</p>

Development

To run the development server:

npm run dev

To build the library:

npm run build

License

MIT License

Copyright (c) 2023

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.