伸縮するゴム風張力インジケータ

<div class="d08-15-11-wrap">
          <div class="d08-15-11-scale">
            <div class="d08-15-11-anchor"></div>
            <div class="d08-15-11-band" id="d08-15-11-band"></div>
            <div class="d08-15-11-grip" id="d08-15-11-grip" style="left:16px"></div>
          </div>
          <div class="d08-15-11-val" id="d08-15-11-val">張力 0%</div>
        </div>

.d08-15-11{width:100%;display:flex;align-items:center;justify-content:center}
        .d08-15-11-wrap{width:100%;max-width:220px;display:flex;flex-direction:column;align-items:center;gap:14px}
        .d08-15-11-scale{position:relative;width:100%;height:26px;display:flex;align-items:center;touch-action:none}
        .d08-15-11-anchor{width:10px;height:10px;border-radius:50%;background:#2a2d3a;flex:0 0 auto}
        .d08-15-11-band{position:relative;height:8px;border-radius:99px;background:linear-gradient(90deg,#6a5cff,#8b5cf6);margin-left:6px;width:0}
        .d08-15-11-grip{position:absolute;top:50%;width:22px;height:22px;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-11-grip.is-drag{cursor:grabbing}
        .d08-15-11-val{font-size:12px;font-weight:700;color:#6a5cff}

(function(){
        var root=document.getElementById('item-08-15-11');if(!root)return;
        var scale=root.querySelector('.d08-15-11-scale'),band=root.querySelector('#d08-15-11-band'),grip=root.querySelector('#d08-15-11-grip'),val=root.querySelector('#d08-15-11-val');
        if(!scale||!band||!grip)return;
        var ANCHOR=16,RANGE=150,dragging=false,scaleLeft=0,pos=ANCHOR,raf=null;
        function apply(p){
          grip.style.left=p+'px';
          var w=Math.max(0,p-ANCHOR);
          band.style.width=w+'px';
          band.style.height=Math.max(3,8-w/RANGE*4)+'px';
          if(val)val.textContent='張力 '+Math.round(Math.min(100,w/RANGE*100))+'%';
        }
        grip.addEventListener('pointerdown',function(e){
          dragging=true;grip.classList.add('is-drag');
          if(raf)cancelAnimationFrame(raf);
          var r=scale.getBoundingClientRect();scaleLeft=r.left;
          try{grip.setPointerCapture(e.pointerId);}catch(err){}
        });
        grip.addEventListener('pointermove',function(e){
          if(!dragging)return;
          var raw=e.clientX-scaleLeft;if(raw<ANCHOR)raw=ANCHOR;
          var extra=Math.max(0,raw-(ANCHOR+RANGE));
          pos=Math.min(raw,ANCHOR+RANGE)+Math.sqrt(extra)*3;
          apply(pos);
        });
        function end(){
          if(!dragging)return;
          dragging=false;grip.classList.remove('is-drag');
          var x=pos,v=0,stiff=.2,damp=.7;
          function step(){
            var f=(ANCHOR-x)*stiff;v=(v+f)*damp;x+=v;
            if(x<ANCHOR-6)x=ANCHOR-6;
            apply(Math.max(ANCHOR,x));
            if(Math.abs(ANCHOR-x)>.5||Math.abs(v)>.5){raf=requestAnimationFrame(step);}
            else{pos=ANCHOR;apply(ANCHOR);}
          }
          raf=requestAnimationFrame(step);
        }
        grip.addEventListener('pointerup',end);
        grip.addEventListener('pointercancel',end);
        apply(ANCHOR);
      })();