スライダーを作成するためのネイティブ js ドラッグ アンド ドロップ機能のサンプル コード

<div class="bar_wrap" id="wrap"><!--外側のラッピング要素-->
 <div class="bar_container"><!--スライドバー-->
  <div class="bar_into"></div><!--スライドの軌跡-->
 </div>
 <div class="bar_drag"><!--スライダー-->
  <div class="bar_text"></div><!--テキスト-->
 </div>
</div>

//外側のラップ要素を取得します var eBarWrap = document.getElementById('wrap');
 //スライダーを取得します var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0];
 //スライディングトレース要素を取得します。var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0];
 //スライダーを取得します var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0];
 //テキスト要素を取得します var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];

//最大位置を取得します。var nMax = eBarCon.offsetWidth - eBarDrag.offsetWidth;

 //スライダーがドラッグイベントを追加します eBarDrag.addEventListener('mousedown',function(event){
  
 });

//スライダーがドラッグイベントを追加します eBarDrag.addEventListener('mousedown',function(event){
  // ドラッグを開始するためにマウスのクリック位置を初期化します var nInitX = event.clientX;
  //スライダーの位置を初期化します var nInitLeft = this.offsetLeft;
 });

//スライダーがドラッグイベントを追加します eBarDrag.addEventListener('mousedown',function(event){
  /*...*/

  //ページはマウス移動イベントをバインドします document.onmousemove = event=>{
   //マウスが移動したときに他の要素やテキストが選択されないようにデフォルトの動作をキャンセルします。event.preventDefault();
   //マウスが動いた後にスライダーが移動する位置を取得します。let nX = event.clientX - nInitX + nInitLeft;
   //スライダーの最大移動位置を制限する if(nX>=nMax){
    nX = nMax;
   }
   //スライダーの最小移動位置を制限する if (nX <= 0) {
    nX = 0;
   }
   //スライダーの位置を変更します（矢印関数が使用されているため、これはまだスライダーを指しています）
   this.style.left = nX + 'px';
   // スライディング トレースの幅を変更します eBarInto.style.width = nX + this.offsetWidth/2 + 'px';
   //テキスト値を変更します eBarText.innerHTML = Math.ceil(nX/nMax*100)/10;
  };
 });

//スライダーがドラッグイベントを追加します eBarDrag.addEventListener('mousedown',function(event){
  /*...*/

  //マウスバインディングイベントを解放し、ページ上のすべてのイベントをキャンセルします。document.onmouseup = function(event){
   ドキュメント.onmousemove = null;
   ドキュメント.onmouseup = null;
  }
 });

//デフォルト値を変更する eBarText.innerHTML = 0;

//スライドバーにクリックイベントを追加 eBarCon.addEventListener('click',function(event){
  //スライダーの位置を設定します var nLeft = this.offsetLeft;
  // 配置された親要素を取得します。var eParent = this.offsetParent;
  //配置されたすべての親要素をループします while(eParent){
   // 親要素の offsetLeft 値を追加して、スライダーとページの左側の間の距離を正確に特定します。nLeft += eParent.offsetLeft;
   // 親要素の外側に配置された親要素を再度取得します。eParent = eParent.offsetParent;
  }
  //スライダーの位置を計算します var nX = event.clientX - nLeft;
  //スライダーの位置を変更します eBarDrag.style.left = nX + 'px';
  // スライディング トレースの幅を変更します eBarInto.style.width = nX + eBarDrag.offsetWidth/2 + 'px';
  //テキスト値を変更する eBarText.innerHTML = Math.ceil(nX/nMax*100)/10
 });