ラバーバンド抵抗ドラッグ

<div class="d08-15-02-wrap">
          <div class="d08-15-02-track" id="d08-15-02-track">
            <div class="d08-15-02-fill" id="d08-15-02-fill"></div>
            <div class="d08-15-02-handle" id="d08-15-02-handle"></div>
          </div>
          <p class="d08-15-02-hint">端まで引くとゴムのように抵抗</p>
        </div>

.d08-15-02{width:100%;display:flex;align-items:center;justify-content:center}
        .d08-15-02-wrap{width:100%;max-width:230px;display:flex;flex-direction:column;align-items:center;gap:14px}
        .d08-15-02-track{position:relative;width:100%;height:10px;border-radius:99px;background:#e9e9f0;touch-action:none}
        .d08-15-02-fill{position:absolute;top:0;left:0;height:100%;border-radius:99px;background:linear-gradient(90deg,#6a5cff,#8b5cf6)}
        .d08-15-02-handle{position:absolute;top:50%;left:0;width:24px;height:24px;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-15-02-hint{font-size:11.5px;color:#9aa0b0;margin:0}

(function(){
        var root=document.getElementById('item-08-15-02');if(!root)return;
        var track=root.querySelector('#d08-15-02-track'),handle=root.querySelector('#d08-15-02-handle'),fill=root.querySelector('#d08-15-02-fill');
        if(!track||!handle||!fill)return;
        var dragging=false,raf=null,pos=0,trackLeft=0,W=0;
        function apply(p){
          handle.style.left=p+'px';
          fill.style.width=Math.max(0,Math.min(W,p))+'px';
        }
        handle.addEventListener('pointerdown',function(e){
          dragging=true;if(raf)cancelAnimationFrame(raf);
          var r=track.getBoundingClientRect();trackLeft=r.left;W=r.width;
          try{handle.setPointerCapture(e.pointerId);}catch(err){}
        });
        handle.addEventListener('pointermove',function(e){
          if(!dragging)return;
          var raw=e.clientX-trackLeft;if(raw<0)raw=0;
          var extra=Math.max(0,raw-W);
          pos=Math.min(raw,W)+Math.sqrt(extra)*3;
          apply(pos);
        });
        function end(){
          if(!dragging)return;dragging=false;
          var x=pos,vx=0,stiff=.2,damp=.7;
          function step(){
            var fx=(0-x)*stiff;vx=(vx+fx)*damp;x+=vx;
            if(x<0)x=0;
            apply(x);
            if(Math.abs(x)>.5||Math.abs(vx)>.5){raf=requestAnimationFrame(step);}
            else{apply(0);}
          }
          raf=requestAnimationFrame(step);
        }
        handle.addEventListener('pointerup',end);
        handle.addEventListener('pointercancel',end);
      })();