JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<script src="//mtt.erichusted.com/assets/js/cookies.min.js?v=1.2.1"></script>
<div id="volume">
    <div class="control">
        <span class="knob"></span>
    </div>
</div>

CSS

body {
    padding-top: 5em;
    text-align: center;
}

#volume {
    width: 10em; height: 0.8em;
    position: relative;
    cursor: pointer;
    background: #ddd;
    margin: 0 auto;
    border-radius: 3px;
}

.vol-box {
    font-size: 0.6em;
}

.control {
    text-align: center;
    left: 0; top: 0;
    position: absolute;
    width: auto;
    height: 100%;
    background-color: #68a85b;
    border-radius: 3px;
    overflow: visible !important;
}

.knob {
    position: absolute;
    top: -0.1em; right: -5px;
    background-color: #fff;
    border: 2px solid #ccc;
    width: 0.8em; height: 0.8em;
    border-radius: 1em;
}

.vol-percent {
    background-color: #68a85b;
    display: inline-block;
    color: #fff;
    position: absolute;
    top: -1.6em;
    left: -0.3em;
    border-radius: 3px;
    padding: 0.1em 0.2em;
    min-width: 1.6em;
    min-height: 1.2em;
}

JavaScript

var volume = { 

    init: function(e){        
        var volumeCookie = Cookies.get("volume-percent");
               
        $('#volume .control').width(volumeCookie);
        
        $('#volume').on('click', volume.change);
        $('#volume .control').on('mousedown', volume.drag);
    },
      
    change: function(e){
        e.preventDefault();
        var percent = percentHelper.getFrac(e, $(this)) * 100;
        $('#volume .control').animate({ width: percent + '%' }, 100);
        volume.update(percent);
        Cookies.set("volume-percent", percent, { expire: 2592000 }); // Expire in 30 days
    },
  
    update: function(percent){
        $('.vol-percent').text(Math.round(percent));
    },

    drag: function(e){
        e.preventDefault();
        $(document).on('mousemove', volume.moveHandler);
        $(document).on('mouseup', volume.stopHandler);
    },

    moveHandler: function(e){
        var holderOffset = $('#volume').offset().left,
            sliderWidth = $('#volume').width(),
            posX = Math.min(Math.max(0, e.pageX - holderOffset), sliderWidth);

        $('#volume .control').width(posX);
        volume.update(posX / sliderWidth * 100);
    },

    stopHandler: function(){
        $(document).off('mousemove', volume.moveHandler);
        $(document).off('mouseup', volume.stopHandler);
    }
  
}

var percentHelper = {
    getFrac: function(e, $this){
        return ( e.pageX - $this.offset().left ) / $this.width();
    }
}

volume.init();