ドラッグ巻き戻し進捗バー

<div class="d08-07-09-player">
          <div class="d08-07-09-time"><span id="d08-07-09-cur">1:12</span><span class="d08-07-09-dur"> / 3:45</span></div>
          <div class="d08-07-09-bar" id="d08-07-09-bar">
            <div class="d08-07-09-fill" id="d08-07-09-fill" style="width:32%"></div>
            <div class="d08-07-09-thumb" id="d08-07-09-thumb" style="left:32%"></div>
          </div>
        </div>

.d08-07-09-player{width:100%;max-width:240px}
        .d08-07-09-time{font-size:12px;font-weight:700;color:#555;margin-bottom:12px;font-variant-numeric:tabular-nums}
        .d08-07-09-dur{color:#b0b4c0;font-weight:600}
        .d08-07-09-bar{position:relative;width:100%;height:6px;border-radius:99px;background:#e9e9f0;touch-action:none}
        .d08-07-09-fill{position:absolute;top:0;left:0;height:100%;border-radius:99px;background:#2a2d3a}
        .d08-07-09-thumb{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#2a2d3a;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transform:translate(-50%,-50%);cursor:grab}

(function(){
        var root=document.getElementById('item-08-07-09');if(!root)return;
        var bar=root.querySelector('#d08-07-09-bar'),fill=root.querySelector('#d08-07-09-fill'),thumb=root.querySelector('#d08-07-09-thumb'),cur=root.querySelector('#d08-07-09-cur');
        if(!bar||!fill||!thumb)return;
        var DUR=225;
        var dragging=false;
        function fmt(s){s=Math.round(s);var m=Math.floor(s/60),sec=s%60;return m+':'+(sec<10?'0':'')+sec;}
        function setPct(clientX){
          var r=bar.getBoundingClientRect();
          var pct=Math.min(1,Math.max(0,(clientX-r.left)/r.width));
          fill.style.width=(pct*100)+'%';thumb.style.left=(pct*100)+'%';
          if(cur)cur.textContent=fmt(pct*DUR);
        }
        bar.addEventListener('pointerdown',function(e){dragging=true;setPct(e.clientX);try{bar.setPointerCapture(e.pointerId);}catch(err){}});
        bar.addEventListener('pointermove',function(e){if(dragging)setPct(e.clientX);});
        function stop(){dragging=false;}
        bar.addEventListener('pointerup',stop);
        bar.addEventListener('pointercancel',stop);
      })();