ドラッグ値変更スライダー

<div class="d08-07-02-wrap">
          <div class="d08-07-02-label">音量<span class="d08-07-02-val" id="d08-07-02-val">60</span>%</div>
          <div class="d08-07-02-track" id="d08-07-02-track">
            <div class="d08-07-02-fill" id="d08-07-02-fill" style="width:60%"></div>
            <div class="d08-07-02-thumb" id="d08-07-02-thumb" style="left:60%" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60"></div>
          </div>
        </div>

.d08-07-02-wrap{width:100%;max-width:240px}
        .d08-07-02-label{font-size:13px;font-weight:700;color:#555;margin-bottom:14px;display:flex;justify-content:space-between}
        .d08-07-02-val{color:#6a5cff}
        .d08-07-02-track{position:relative;width:100%;height:8px;border-radius:99px;background:#e9e9f0;touch-action:none}
        .d08-07-02-fill{position:absolute;top:0;left:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#6a5cff,#8b5cf6)}
        .d08-07-02-thumb{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #6a5cff;transform:translate(-50%,-50%);cursor:grab;box-shadow:0 2px 6px rgba(0,0,0,.18)}
        .d08-07-02-thumb:active{cursor:grabbing}

(function(){
        var root=document.getElementById('item-08-07-02');if(!root)return;
        var track=root.querySelector('#d08-07-02-track'),fill=root.querySelector('#d08-07-02-fill'),thumb=root.querySelector('#d08-07-02-thumb'),val=root.querySelector('#d08-07-02-val');
        if(!track||!fill||!thumb)return;
        var dragging=false;
        function setPct(clientX){
          var r=track.getBoundingClientRect();
          var pct=Math.min(1,Math.max(0,(clientX-r.left)/r.width));
          var p=Math.round(pct*100);
          fill.style.width=p+'%';thumb.style.left=p+'%';
          if(val)val.textContent=p;
          thumb.setAttribute('aria-valuenow',p);
        }
        track.addEventListener('pointerdown',function(e){dragging=true;setPct(e.clientX);try{track.setPointerCapture(e.pointerId);}catch(err){}});
        track.addEventListener('pointermove',function(e){if(dragging)setPct(e.clientX);});
        function stop(){dragging=false;}
        track.addEventListener('pointerup',stop);
        track.addEventListener('pointercancel',stop);
      })();