Native js drag and drop function to create a slider example code

<div class="bar_wrap" id="wrap"><!--Outer wrapping element-->
 <div class="bar_container"><!--Slide bar-->
  <div class="bar_into"></div><!--Slide traces-->
 </div>
 <div class="bar_drag"><!--Slider-->
  <div class="bar_text"></div><!--Text-->
 </div>
</div>

//Get the outer wrapping element var eBarWrap = document.getElementById('wrap');
 //Get the slider var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
 //Get the sliding trace element var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
 //Get the slider var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
 //Get the text element var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];

//Get the maximum position var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;

 //Slider adds drag event eBarDrag.addEventListener('mousedown',function(event){
  
 });

//Slider adds drag event eBarDrag.addEventListener('mousedown',function(event){
  //Initialize the click position of the mouse to start dragging var nInitX = event.clientX;
  //Initialize the slider position var nInitLeft = this.offsetLeft;
 });

//Slider adds drag event eBarDrag.addEventListener('mousedown',function(event){
  /*...*/

  //Page binds mouse movement event document.onmousemove = event=>{
   //Cancel the default behavior when the mouse moves to avoid selecting other elements or text event.preventDefault();
   //Get the position where the slider should move to after the mouse moves let nX = event.clientX - nInitX + nInitLeft;
   //Limit the maximum movement position of the slider if(nX>=nMax){
    nX = nMax;
   }
   //Limit the minimum moving position of the slider if (nX <= 0) {
    nX = 0;
   }
   //Modify the slider position (because the arrow function is used, this still points to the slider)
   this.style.left = nX + 'px';
   //Modify the sliding trace width eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
   //Modify the text value eBarText.innerHTML = Math.ceil(nX/nMax*100)/10;
  };
 });

//Slider adds drag event eBarDrag.addEventListener('mousedown',function(event){
  /*...*/

  //Release the mouse binding event and cancel all events on the page document.onmouseup = function(event){
   document.onmousemove = null;
   document.onmouseup = null;
  }
 });

//Modify the default value eBarText.innerHTML = 0;

//Slide bar adds click event eBarCon.addEventListener('click',function(event){
  //Set the slider position var nLeft = this.offsetLeft;
  //Get the positioned parent element var eParent = this.offsetParent;
  //Loop through all positioned parent elements while(eParent){
   //Add the offsetLeft value of the parent element to accurately locate the distance between the slider and the left side of the page nLeft += eParent.offsetLeft;
   //Get the positioned parent element outside the parent element again eParent = eParent.offsetParent;
  }
  //Calculate the slider position var nX = event.clientX - nLeft;
  //Modify the slider position eBarDrag.style.left = nX + 'px';
  //Modify the sliding trace width eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
  //Modify the text value eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
 });