Sliding Buttons JS

Sliding Buttons JS is a javascript library to create buttons that user can interact by sliding.

You can create a mobile application feeling on your web application.

A quick demo:

Slide me horizontally to test!

Setup

Import Styles

 <link rel="stylesheet" href="https://res.cloudinary.com/dd2ownqt9/raw/upload/v1691930546/sliding-buttons.min.css" />

Import Script

 <script src="https://res.cloudinary.com/dd2ownqt9/raw/upload/v1691955712/sliding-buttons.min.js"></script>

Import styles inside your head tag.
Import script at the end of body tag.
And you are ready to go! 🚀

Github:

https://github.com/inancakduvan/sliding-buttons

Props:

Type
Description
Default
animation
boolean
Set true to slide action buttons with animation
false
style
object
Add styles. You can only use 'height' property for now to adjust height of container.
{ height: 80 }

How to use

1) Create your simple html

                    
<div class="sliding-button-container" id="yourFirstDemo">
    <div class="sliding-buttons-on-left">
        <div class="sliding-button">
            <i class="fa-solid fa-box-archive"></i>
        </div>
    </div>

    <div class="sliding-body">
        Slide me horizontally to test!
    </div>

    <div class="sliding-buttons-on-right">
        <div class="sliding-button">
            <i class="fa-solid fa-trash-can"></i>
        </div>
    </div>
</div>

2) Initialize via Javascript

                
const quickDemo = initSlidingButton("#yourFirstDemo");

Real Life Examples

Assign touchstart event to buttons, instead of click event for triggering it on mobile!

1) Notification

Slide to delete notification

dummy profile photo

@johnmaster and 8 more people
liked your post.

dummy post preview

2) Inbox

Slide to archive or delete message

dummy profile photo

Alina Ware

16:32

Hey, what's up? It's been a while since we hung out. Let's plan something fun soon!

DEMOs

1) Classic

Slide me horizontally to test! 
                
<div class="sliding-button-container" id="classicDemo">
    <div class="sliding-buttons-on-left">
        <div class="sliding-button">
            <i class="fa-solid fa-box-archive"></i>
        </div>
    </div>

    <div class="sliding-body">
        Slide me horizontally to test!
    </div>

    <div class="sliding-buttons-on-right">
        <div class="sliding-button">
            <i class="fa-solid fa-trash-can"></i>
        </div>
    </div>
</div>

// Initialize Javascript
const classicDemo = initSlidingButton("#classicDemo");

2) Double Buttons

Test
Slide me horizontally to test! (Double buttons)
Test
                
<div class="sliding-button-container" id="doubleButtonsDemo">
    <div class="sliding-buttons-on-left">
        <div class="sliding-button">
            <i class="fa-solid fa-box-archive"></i>
        </div>
        <div class="sliding-button">
            Test
        </div>
    </div>

    <div class="sliding-body">
        Slide me horizontally to test! (Double buttons)
    </div>

    <div class="sliding-buttons-on-right">
        <div class="sliding-button">
            Test
        </div>
        <div class="sliding-button">
            <i class="fa-solid fa-trash-can"></i>
        </div>
    </div>
</div>

// Initialize Javascript
const doubleButtonsDemo = initSlidingButton("#doubleButtonsDemo");

3) Animated

Test
Slide me horizontally to test! (Animated) 
                
// Initialize Javascript
const animatedDemo = initSlidingButton("#animatedDemo", {
    animation: true
});

4) Smaller Height

Test
Slide me horizontally to test! (Smaller) 
                
// Initialize Javascript
const smallerHeightDemo = initSlidingButton("#smallerHeightDemo", {
    style: {
        height: 60
    }
});

5) One Direction Slide

Slide me to left! (One Direction) 
                
<div class="sliding-button-container" id="oneDirectionDemo">
    <div class="sliding-body">
        Slide me horizontally to test! (Double buttons)
    </div>

    <div class="sliding-buttons-on-right">
        <div class="sliding-button">
            <i class="fa-solid fa-trash-can"></i>
        </div>
    </div>
</div>

// Initialize Javascript
const oneDirectionDemo = initSlidingButton("#oneDirectionDemo");

UTILS

1) Reset

Reset sliding button's position and styles.

                
// Initialize Javascript
const yourSlidingButton = initSlidingButton("#yourSlidingButton", {
    animation: true
});

// Reset
yourSlidingButton.reset();

Future Release Goals

Follow me on Social Media
Sliding Buttons JS is only working on mobile screens. If you want to experience live demo, please open this page on a mobile device or on a mobile simulator via developer console.