クリック分割Before/After比較スライダー

<div class="d01-13-10-wrap">
          <div class="d01-13-10-after"><span>AFTER</span></div>
          <div class="d01-13-10-before"><span>BEFORE</span></div>
          <div class="d01-13-10-handle"><span>⇔</span></div>
        </div>

.prev.d01-13-10{padding:0}
        .d01-13-10-wrap{position:relative;width:100%;height:230px;overflow:hidden;cursor:pointer;user-select:none}
        .d01-13-10-after{position:absolute;inset:0;background:linear-gradient(135deg,#059669,#047857)}
        .d01-13-10-after span{position:absolute;right:20px;top:50%;transform:translateY(-50%);color:#fff;font-weight:800;font-size:14px;letter-spacing:.08em}
        .d01-13-10-before{position:absolute;inset:0;width:50%;overflow:hidden;background:linear-gradient(135deg,#64748b,#334155);transition:width .5s cubic-bezier(.2,.7,.3,1)}
        .d01-13-10-before span{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#fff;font-weight:800;font-size:14px;letter-spacing:.08em;white-space:nowrap}
        .d01-13-10-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);transition:left .5s cubic-bezier(.2,.7,.3,1);z-index:3}
        .d01-13-10-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#fff;color:#111827;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.getElementById('item-01-13-10');if(!root)return;
        var wrap=root.querySelector('.d01-13-10-wrap');
        var before=root.querySelector('.d01-13-10-before');
        var handle=root.querySelector('.d01-13-10-handle');
        wrap.addEventListener('click',function(e){
          var rect=wrap.getBoundingClientRect();
          var x=e.clientX-rect.left;
          var pct=Math.max(6,Math.min(94,(x/rect.width)*100));
          before.style.width=pct+'%';
          handle.style.left=pct+'%';
        });
      })();