function to decrease and increase volume (HTML5 audio)

Question

Hello, I have a function that decreases and increases the volume of the music, only I’m in trouble, the mouse does not follow the span that makes the function to increase and decrease the volume, for example I click and secure the mouse on top of the span, only instead of it moving both right and left, it only moves after the mouse comes off of it and when the mouse arrow is almost coming off the screen (if you know what I mean), here is the function

var player,drag;
var audioElement,playButton,slider,audioButton,icoAudio;

function selectPlayer(elem){

     if(player!=elem){
        player=elem;
     }

     audioElement=player.querySelector('audio');
     playButton=player.querySelector('.play');
     slider=player.querySelector('.slider');
     sliderVol=slider.querySelector('.bar');
     audioButton=player.querySelector('.audio');
     playButton.addEventListener('click',playAudio);
     slider.addEventListener('mousedown', startDrag);
     slider.addEventListener('mousemove',showVolume);
     sliderVol.addEventListener('mousemove',showVolume);
     slider.addEventListener('mouseup', startDrag);
     sliderVol.addEventListener('mouseup', startDrag);
     sliderVol.querySelector('span').addEventListener('mouseup', startDrag);
     document.addEventListener('mouseup', startDrag);
}

function startDrag(event){

   if(event.type=="mousedown"){
     drag=true;
   }else{
     drag=false;
   }

}

function showVolume(event){

    if(drag){
       var w=slider.clientWidth;
       var x=(event.clientX)-slider.offsetLeft;
       var pctVol=x/w;

       if(pctVol>1){
         sliderVol.style.width=100+"%";
         audioElement.volume=1;
       }else if(pctVol<0){
         sliderVol.style.width=0+"%";
         audioElement.volume=0;
       }else{
         sliderVol.style.width=(x/w)*100+"%";
         audioElement.volume=pctVol;
      }

   }

}

HTML

<div class="slider absolute">
   <div class="back relative">
      <div class="bar relative"><span class="right"></span></div>
   </div>
</div>

CSS

.slider{
        top:85px;
        left:10px;
        padding:0 0 0 60px;
        width:425px;
        height:75px;
        box-sizing:border-box;
    }
    .slider .back {
        margin:11px 0 0 -60px;
        padding:7px 7px;
        width:425px;
        height: 55px;
        box-sizing:border-box;
    }
    .slider .bar {
        width:100%;
        height: 41px;
        box-sizing: border-box;
        background-color: #0A35A1;
        border-radius:4px;
        box-shadow:0 0 2px 2px #000;
    }
    .slider .bar span {
        position: relative;
        top: -13px;
        right: -6px;
        width: 70px;
        height: 70px;
        cursor:pointer;box-sizing: border-box; background-color: #0A35A1;-webkit-border-radius: 50%; -moz-border-radius: 50%;border-radius: 50%;box-shadow:0 0 2px 2px #000;}