JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<div class="slider">
    <div class="selected" style="margin-left: 15%; margin-right: 15%"></div>
    <div class="handle left-handle" style="margin-left: 15%; float: left;">
        <div class="info">
            <p>Min</p>            
            <p><strong>256</strong></p>
        </div>        
    </div>
    <div class="handle right-handle" style="margin-right: 15%; float: right;">
        <div class="info">
            <p>Max</p>            
            <p><strong>1024</strong></p>
        </div>    
    </div>
</div>
<div id="log"></div>

CSS

body{
    background: #F0F0F0;
    font-family: Verdana;
}
strong{
    font-weight: bold;
}
.slider{
    background: #E3E3E3;
    width: 350px;
    height: 12px;
    margin: 80px auto;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(199, 199, 199, 1), 0px 1px 0px 0px rgba(255, 255, 255, 1);
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(199, 199, 199, 1), 0px 1px 0px 0px rgba(255, 255, 255, 1);
    box-shadow: inset 0px 2px 0px 0px rgba(199, 199, 199, 1), 0px 1px 0px 0px rgba(255, 255, 255, 1);
    border-bottom: 1px solid #d8d8d8;
}
.handle{
    display: inline-block;
    background: white;
    width: 30px;
    height: 26px;
    top: -18px;
    position: relative;
    
    cursor: pointer;
    
    -webkit-box-shadow: 0px 2px 0px 0px rgba(200, 200, 200, 1);
    -moz-box-shadow: 0px 2px 0px 0px rgba(200, 200, 200, 1);
    box-shadow: 0px 2px 0px 0px rgba(200, 200, 200, 1);
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.handle:after{
    content: '';
    display: block;
    width: 2px;
    height: 14px;
    background: #C4C4C4;
    margin-top: 6px;
    margin-left: 8px;
    
    -webkit-box-shadow: 2px 0px 0px 0px rgba(255, 255, 255, 1), 4px 0px 0px 0px rgba(196, 196, 196, 1), 6px 0px 0px 0px rgba(255, 255, 255, 1), 8px 0px 0px 0px rgba(196, 196, 196, 1), 10px 0px 0px 0px rgba(255, 255, 255, 1), 12px 0px 0px 0px rgba(196, 196, 196, 1);
-moz-box-shadow: 2px 0px 0px 0px rgba(255, 255, 255, 1), 4px 0px 0px 0px rgba(196, 196, 196, 1), 6px 0px 0px 0px rgba(255, 255, 255, 1), 8px 0px 0px 0px rgba(196, 196, 196, 1), 10px 0px 0px 0px rgba(255, 255, 255, 1), 12px 0px 0px 0px rgba(196, 196, 196, 1);
box-shadow: 2px 0px 0px 0px rgba(255, 255, 255, 1), 4px 0px 0px 0px rgba(196, 196, 196, 1), 6px 0px 0px 0px rgba(255, 255, 255, 1), 8px 0px 0px 0px rgba(196, 196, 196, 1), 10px 0px 0px 0px rgba(255, 255, 255, 1), 12px 0px 0px 0px rgba(196,...

JavaScript

(function($){

$.fn.disableSelection = function() {
    return this.each(function() {           
        $(this).attr('unselectable', 'on')
               .css({
                   '-moz-user-select':'none',
                   '-webkit-user-select':'none',
                   'user-select':'none',
                   '-ms-user-select':'none'
               })
               .each(function() {
                   this.onselectstart = function() { return false; };
               });
    });
};

})(jQuery);

$('body').disableSelection();


var dragStarted = false;
var handle;
var startPosition = 0;
var leftMargin = 0;
var rightMargin = 0;
var min = 0;
var max = 0;
var lastMoveLeft = 0;
var lastMoveRight = 0;
var moveLeft = 0;
var moveRight = 0;
$('.handle').mousedown(function(eventData) {
    dragStarted = true;
    handle = this;
    startPosition = parseInt($(handle).offset().left) + 15 - $(handle).css('left').replace('auto', '0').replace('px', '');

    min = $(handle).parents('.slider').offset().left;
    max = $(handle).parents('.slider').offset().left + $(handle).parents('.slider').width() - $(handle).width();

    leftMargin = $('.selected').css('margin-left').replace('auto', '0').replace('px', '');
    rightMargin = $('.selected').css('margin-right').replace('auto', '0').replace('px', '');
});
$('body').mouseup(function(eventData) {
    dragStarted = false;
    lastMoveLeft = moveLeft;
    lastMoveRight = moveRight;
});
$("body").mousemove(function(e) {
    if (dragStarted) {
        var move = e.clientX - startPosition;
        var selectMoveLeft = 0;
        var selectMoveRight = 0;

        if ($(handle).hasClass('left-handle')) {
            selectMoveLeft = parseInt(leftMargin) + parseInt(move) - lastMoveLeft;
        }
        if ($(handle).hasClass('right-handle')) {
            selectMoveRight = parseInt(rightMargin) - parseInt(move) + lastMoveRight;
        }
       

        if (selectMoveLeft >= 0 && selectMoveRight >= 0) {
           ...