動画Before/Afterスライダー

<div class="d07-03-11-comp" id="d07-03-11-comp">
          <div class="d07-03-11-after"></div>
          <div class="d07-03-11-before" style="width:50%">
            <span class="d07-03-11-lb">編集前</span>
          </div>
          <span class="d07-03-11-lb d07-03-11-lb-r">編集後</span>
          <div class="d07-03-11-handle" style="left:50%">
            <span class="d07-03-11-grip">&#8596;</span>
          </div>
        </div>

.prev.d07-03-11{background:#0f172a;padding:0}
        .d07-03-11-comp{position:relative;width:100%;max-width:340px;aspect-ratio:16/9;border-radius:12px;overflow:hidden;cursor:ew-resize;user-select:none}
        .d07-03-11-after{position:absolute;inset:0;background:linear-gradient(135deg,#0ea5e9,#22d3ee)}
        .d07-03-11-before{position:absolute;inset:0 auto 0 0;overflow:hidden;background:linear-gradient(135deg,#475569,#1e293b)}
        .d07-03-11-lb{position:absolute;top:8px;left:10px;font-size:10.5px;color:#fff;background:rgba(0,0,0,.45);padding:3px 9px;border-radius:20px}
        .d07-03-11-lb-r{left:auto;right:10px}
        .d07-03-11-handle{position:absolute;top:0;bottom:0;width:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}
        .d07-03-11-handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%)}
        .d07-03-11-grip{position:relative;z-index:2;width:30px;height:30px;border-radius:50%;background:#fff;color:#0f172a;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 4px 10px rgba(0,0,0,.3)}

(function(){
        var root=document.querySelector('#item-07-03-11');if(!root)return;
        var comp=root.querySelector('.d07-03-11-comp'),before=root.querySelector('.d07-03-11-before'),handle=root.querySelector('.d07-03-11-handle');
        var dragging=false;
        function setPct(pct){
          pct=Math.max(0,Math.min(100,pct));
          before.style.width=pct+'%';
          handle.style.left=pct+'%';
        }
        function fromEvent(e){
          var rect=comp.getBoundingClientRect();
          var x=(e.touches?e.touches[0].clientX:e.clientX)-rect.left;
          setPct(x/rect.width*100);
        }
        comp.addEventListener('mousedown',function(e){dragging=true;fromEvent(e);});
        window.addEventListener('mousemove',function(e){if(dragging)fromEvent(e);});
        window.addEventListener('mouseup',function(){dragging=false;});
        comp.addEventListener('touchstart',function(e){dragging=true;fromEvent(e);});
        comp.addEventListener('touchmove',function(e){if(dragging)fromEvent(e);});
        comp.addEventListener('touchend',function(){dragging=false;});
      })();