function to decrease and increase volume (HTML5 audio)

Hello, I have a function that decreases and increases the volume of the music, but I'm in trouble, the mouse does not accompany span that does the function to increase and decrease the volume, for example I click and hold the mouse on top of span , except that instead of it moving both to the right and to the left, it only moves after the mouse exits from it and when the mouse arrow is almost coming off the screen (if you understand me ), 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;}