SOURCE

window.onload=function(){
   var btn = document.getElementsByClassName('process-btn')[0];
   var selectEle = document.getElementsByClassName('process-select')[0];
   var x=0,l=0,isdown=false;
   var length=300
   btn.onmousedown=function(e){
       x=e.clientX;
       l=btn.offsetLeft;
       console.log(x,l)
       isdown=true
   }
   window.onmousemove=function(e){
      if (isdown == false) {
            return;
      }
      if(e.clientX-(x-l)+btn.offsetWidth>=length){
          selectEle.style.width=length+'px'
           btn.style.left=length-btn.offsetWidth+'px'
        
      }else if(e.clientX-(x-l)+btn.offsetWidth<=0){
            selectEle.style.width=0+'px'
           btn.style.left=0+'px'
      }else{
        selectEle.style.width=e.clientX-(x-l)+btn.offsetWidth+'px'
        console.log((x-l))
        btn.style.left=e.clientX-(x-l)+'px'
      }
    
   }
   window.onmouseup=function(e){
        isdown=false;
       console.log(isdown)
   }
    btn.onmouseup=function(e){
       isdown=false;
       console.log(isdown)
   }
}

<div class="process">
    <div class="process-select">
    </div>
    <div class="process-btn">
    </div>
</div>

.process{
    width:300px;
    border-radius: 10px;
    background: #b5b6b618;
    height:16px;
    position: relative;
}
.process .process-select{
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 100px;
    border-radius:10px;
    background: #f58505
}
.process .process-btn{
    position: absolute;
    top: -4px;
    left: 84px;
    height: 24px;
    width: 24px;
    border-radius:50%;
    background: #f58505;
    cursor: pointer;
}