JSFiddle - React, Tailwind, and code Playground

by richardneililagan

HTML

<div id="container">
    <div id="content">
    </div>
</div>
<div id="slider">
    <div id="nub"></div>
</div>

CSS

div { box-sizing : border-box; position:relative; }

#container {
    width : 120px; height : 100px;
    margin:10px auto; padding:5px;
    background:rgba(255,0,0,0.1);
    border:1px solid red;
}

#content {
    width:400px;
    height:100%;
    
    background:rgba(0,0,255,0.1);
    border:1px solid blue;
}

#slider {
    width : 120px; height : 16px;
    margin:5px auto; padding:2px;
    border:1px solid rgba(0,0,0,0.08);
    border-radius:2px;
}

#slider:hover, #slider:active {
    border-color:rgba(0,0,0,0.2);
}

#nub {
    width:10px; height:10px;
    border:1px solid rgba(0,0,0,0.2);
    border-radius:2px;
    background:rgba(0,0,0,0.1);
    cursor:pointer;
}

#nub:active {
    border-color:rgba(0,255,0,0.4);
    background:rgba(0,255,0,0.2);
}

JavaScript

(function ($) {
    
    // document ready
    $(function () {
        
        var cache = {
            container : $('#container'),
            content : $('#content'),
            slider : $('#slider'),
            nub : $('#nub')
        };
        
        cache.nub.draggable({
            containment : 'parent'
        }).bind('drag', function (e,ui) {
            
            var pct = (cache.nub.position().left - 2) / 104
                awdt = (cache.content.width() - cache.container.width()) * pct
                ;
            
            cache.content.css('marginLeft', -awdt + 'px');
        });
        
        
    });
    
    
    
})(jQuery);