JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="sb"></div>

<div class="sb"></div>

CSS

.slideButton {

    float: left;
    overflow: hidden;
    width: 80px;
    height: 25px;
    margin: 50px;
    border-radius: 25px;
    border: 1px solid #999;
    
}

.sb-container {
    float: left;
    width: 0px;
    height: 100%;
}

.sb-left {
    width: 100%;
    height: 100%;
}

.sb-button {
    float: right;
    overflow: visible;
    background: #777;
    border: 3px solid #222;
    width: 20px;
    height: 20px;
    border-radius: 20px;
}


.slideButton {
background: #f2f2f2;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMWUxZTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #f2f2f2 0%, #e1e1e1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#e1e1e1));
background: -webkit-linear-gradient(top,  #f2f2f2 0%,#e1e1e1 100%);
background: -o-linear-gradient(top,  #f2f2f2 0%,#e1e1e1 100%);
background: -ms-linear-gradient(top,  #f2f2f2 0%,#e1e1e1 100%);
background: linear-gradient(to bottom,  #f2f2f2 0%,#e1e1e1 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e1e1e1',GradientType=0 );
}

.sb-left {
background: #bfd255;
background:...

JavaScript

var speed = 200;

$('.sb').each(function() {
    
    var obj = $(this);
    
    obj.addClass('slideButton sb-off');
    
    $('<div class="sb-container"><div class="sb-button"></div><div class="sb-left"></div></div>').appendTo( obj );
    
    var container= obj.find('.sb-container'),
        button = obj.find('.sb-button'),
        on = obj.find('.sb-left'),
        
        objW = obj.width(),
        buttonOW = button.outerWidth(),
        buttonHalf = ( buttonOW / 2 ),
        halfway = ( objW / 2 );
    
    on.css({ marginLeft: -buttonHalf });
    container.animate({ width: buttonOW }, speed);
    
    
    obj.on("mousedown mouseup mouseleave mousemove touchmove touchend", function( e ) {
        
        if ( e.type === 'touchmove' ) {
            var e = e.originalEvent,
                pageX = e.targetTouches[0].pageX;
        }
        else if ( e.type !== 'touchmove' ) {
            var e = e,
                pageX = e.pageX;
        }
        
        e.preventDefault();
        
        var offset = obj.offset(),       
            position = button.position(),
            eventPos = ( pageX - offset.left ) + buttonHalf,
            eType = e.type;
        
        if ( eType === 'mousedown' || eType === 'touchmove' ) {
            obj.addClass('sb-mousehold');
        }
        
        if ( eType === 'mouseup' || eType === 'mouseleave' || eType === 'touchend' ) {
            
            if ( obj.hasClass('sb-mousehold') || eType === 'touchend' ) {
                
                var eventPos = ( container.width() - buttonHalf );
                
                if ( eventPos > halfway ) {
                    obj.removeClass('sb-off').addClass('sb-on');
                    container.animate({ width: objW }, 200);
                }
                else if ( eventPos - buttonHalf <= halfway  ) {
                    obj.removeClass('sb-on').addClass('sb-off');
                    container.animate({ width: buttonOW }, 200);
                }
    ...