JSFiddle - React, Tailwind, and code Playground

by surfine

HTML

<div class="dragSlideWrap">
    <span class="dragSlide yanone">&raquo; Slide &raquo;</span>
    <span>By sliding, you agree to our Terms</span>
</div>
<div id="1"></div>

CSS

@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 400;
    src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff) format('woff');
}
.yanone {
    font-family: 'Yanone Kaffeesatz';
}
.dragSlideWrap {
    height: 40px; width: 180px;
    color: #a9afa1;
    border: 1px solid #e9e9e9;
    background: #f9f9f9;
    border-radius: 4px;
    display: inline-block;
}
.dragSlide {
    height: 20px; width: 60px;
    position: relative;
    padding: 10px;
    font-size: 22px;
    color: #FFF;
    background: #668CFF;
    border-radius: 4px;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.dragSlide:active {
    cursor: url(http://www.surfixe.com/img/cursor/closedhand.cur), default;
}

JavaScript

var mouseX = 0, mouseY = 0;
var mUp = 0;
var inside = false;
$(document).mouseup(function(){
    if (mUp !== 2) {
        mUp = 0;
    }
});
$('.dragSlide').mousedown(function(){
    document.onselectstart = function() { return false; }
    if (mUp !== 2) {
        mUp = 1;
    }
})
$('.dragSlideWrap').mousemove(function(e) {
    mouseX = e.pageX;
    mouseX = mouseX - 45;
    $('#1').html(mouseX);

    if (mUp == 0) {
        $('.dragSlide').css({'left': '0'});
    } else if (mUp == 1) {
        if (mouseX > 40 && mouseX < 180) {
            mUp = 2;
        } else if (mouseX < 0) {
            $('.dragSlide').css({'left': '0'});
        } else {
            e.originalEvent.preventDefault();
            $('.dragSlide').css({'left': mouseX });
        }
    } else if (mUp == 2) {
        $('.dragSlide').animate({'left': '100px'}, 300);
    }
});
$('.dragSlideWrap').hover(function() {
    if (mUp == 0) {
        $(this).css("cursor", "url(http://www.surfixe.com/img/cursor/openhand.cur), default");
    }
});