JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <div style="width: 100%; height: 50px; background-color: grey; position: absolute; top: 220px;"></div>
    <div id="volumebar">
        <div id="volume"></div>
    </div>
    <div id="display"><img src="https://image.ibb.co/ktNgTF/volume.png" id="icon"></div>
    <div id="indicator">35</div>
    <div id="target" class="spinner"></div>

CSS

#target {
            position: absolute;
            top: 115px;
            left: 100px;
            width: 240px;
            height: 255px;
            background-image: url(https://image.ibb.co/gTqoSa/spinner.png);
        }

        #volumebar {
            border: 7px solid darkgrey;
            border-top: 20px solid darkgrey;
            position: absolute;
            top: 107px;
            left: 350px;
            width: 15px;
            height: 100px;
            background-color: lightgrey;
        }

        #volume {
            width: 100%;
            height: 1%;
            background-color: #22dd22;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        #icon {
            height: 50px;
            width: 50px;
            position: absolute;
            top: 225px;
            left: 340px;
        }

        #indicator {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color: #ddd;
            position: absolute;
            top: 108px;
            left: 345px;
            text-align: center;
            width: 40px;
            height: 20px;
        }

JavaScript

!function(a){var b="propeller",c={angle:0,speed:0,inertia:0,minimalSpeed:.001,minimalAngleChange:.1,step:0,stepTransitionTime:0,stepTransitionEasing:"linear",rotateParentInstantly:!1,touchElement:null},d=function(a,b){return"string"==typeof a&&(a=document.querySelectorAll(a)),a.length>1?d.createMany(a,b):(1===a.length&&(a=a[0]),this.element=a,this.active=!1,this.transiting=!1,this.update=this.update.bind(this),this.initCSSPrefix(),this.initAngleGetterSetter(),this.initOptions(b),this.initHardwareAcceleration(),this.initTransition(),this.bindHandlers(),this.addListeners(),void this.update())};d.createMany=function(a,b){for(var c=[],e=0;e<a.length;e++)c.push(new d(a[e],b));return c};var e=d.prototype;e.initAngleGetterSetter=function(){Object.defineProperty(this,"angle",{get:function(){return this._angle},set:function(a){this._angle=a,this.virtualAngle=a,this.updateCSS()}})},e.bindHandlers=function(){this.onRotationStart=this.onRotationStart.bind(this),this.onRotationStop=this.onRotationStop.bind(this),this.onRotated=this.onRotated.bind(this)},e.addListeners=function(){this.listenersInstalled=!0,"ontouchstart"in document.documentElement?(this.touchElement.addEventListener("touchstart",this.onRotationStart),this.touchElement.addEventListener("touchmove",this.onRotated),this.touchElement.addEventListener("touchend",this.onRotationStop),this.touchElement.addEventListener("touchcancel",this.onRotationStop),this.touchElement.addEventListener("dragstart",this.returnFalse)):(this.touchElement.addEventListener("mousedown",this.onRotationStart),this.touchElement.addEventListener("mousemove",this.onRotated),this.touchElement.addEventListener("mouseup",this.onRotationStop),this.touchElement.addEventListener("mouseleave",this.onRotationStop),this.touchElement.addEventListener("dragstart",this.returnFalse)),this.touchElement.ondragstart=this.returnFalse},e.removeListeners=function(){this.listenersInstalled=!1,"ontouchstart"in...