JSFiddle - React, Tailwind, and code Playground

by samccone

HTML

<div class='toggle_box'>
</div>

CSS

.toggle_box
{
    width:300px;
    height:85px;
    background-color:#CCC;
    margin-left:50px;
}

.switch
{
    height:100%;
    background-color:#FF0000;
    width:70%;
    position:relative;
}

.switch.active
{
    background-color:lime;
}

JavaScript

var mouseDown        =    false;
var beginTouchDown        =    0;
$(document).ready(function(){
    init();
});


function init()
{
    create_elements();
    set_listeners();   
}

function create_elements()
{
    var inside_html        =    "<div class='switch' onmousedown='event.preventDefault ? event.preventDefault() : event.returnValue = false'></div>";
    $('.toggle_box').each(function(){
        $(this).attr('state','off');
        $(this).html(inside_html);
        $('.switch',this).css({'top':($(this).height()/2 - $('.switch',this).height()/2)});
    });
}


function set_listeners()
{
    $('.toggle_box').mousedown(slide_begin);
    $('.toggle_box').mousemove(slide_move);
    $('.toggle_box').mouseup(slide_end);
    $('.toggle_box').mouseout(slide_end);
    $('.toggle_box').bind('touchstart',touch_start);
    $('.toggle_box').bind('touchmove',touch_move);
    $('.toggle_box').bind('touchend',slide_end);    

}


function touch_start(e)
{
     
    var parent         =    $(e.currentTarget);
    var target         =    $('.switch',parent);
    target.stop();
    
    beginTouchDown = parseInt(e.originalEvent.touches[0].pageX,10)-(target.offset().left - parent.offset().left);
}

function touch_move(e)
{
    e.preventDefault();
    var parent         =    $(e.currentTarget);
    var parentOffset   =    parent.offset().left;
    var target         =    $('.switch',parent);
    var currentLeft    =    0;
    var toMove         =    parseInt(e.originalEvent.touches[0].pageX,10)-beginTouchDown+currentLeft;
    if(!(toMove+parentOffset+target.width() > parentOffset+parent.width())&&(toMove+parentOffset > parentOffset))
    {
            target.css({'left':toMove+"px"});
check_place(target);
    }

}

function slide_move(e)
{
    if(mouseDown === true)
    {
        var parent         =    $(e.currentTarget);
        var target         =    $('.switch',parent);
        var parentOffset   =    parent.offset().left;
        var toMove         =   ...