ドラッグ式ビフォーアフター

<div class="ba">
          <div class="after"></div>
          <div class="before"></div>
          <div class="handle"><span class="line"></span><span class="grip">⟺</span></div>
          <span class="lbl lbl-b">Before</span><span class="lbl lbl-a">After</span>
        </div>

.d11-02-03 .ba{position:relative;width:260px;height:180px;border-radius:12px;overflow:hidden;cursor:ew-resize;user-select:none;box-shadow:0 8px 24px rgba(0,0,0,.15)}
        .d11-02-03 .before,.d11-02-03 .after{position:absolute;inset:0}
        .d11-02-03 .after{background:linear-gradient(135deg,#f7b733,#fc4a1a)}
        .d11-02-03 .before{background:linear-gradient(135deg,#2c3e50,#4ca1af);clip-path:inset(0 50% 0 0)}
        .d11-02-03 .handle{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center}
        .d11-02-03 .line{position:absolute;top:0;bottom:0;width:3px;background:#fff}
        .d11-02-03 .grip{position:relative;width:34px;height:34px;border-radius:50%;background:#fff;color:#333;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.3)}
        .d11-02-03 .lbl{position:absolute;bottom:10px;font-size:11px;color:#fff;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.4)}
        .d11-02-03 .lbl-b{left:10px}.d11-02-03 .lbl-a{right:10px}

(function(){
        var r=document.querySelector('#item-11-02-03 .d11-02-03');
        var ba=r.querySelector('.ba'),before=r.querySelector('.before'),handle=r.querySelector('.handle'),drag=false;
        function set(x){
          var rect=ba.getBoundingClientRect(),p=Math.max(0,Math.min(1,(x-rect.left)/rect.width));
          before.style.clipPath='inset(0 '+((1-p)*100)+'% 0 0)';
          handle.style.left=(p*100)+'%';
        }
        ba.addEventListener('mousedown',function(e){drag=true;set(e.clientX);});
        window.addEventListener('mousemove',function(e){if(drag)set(e.clientX);});
        window.addEventListener('mouseup',function(){drag=false;});
        ba.addEventListener('touchmove',function(e){set(e.touches[0].clientX);},{passive:true});
      })();