ビフォーアフター比較スライダー

<div class="d07-01-03-wrap">
          <div class="d07-01-03-box">
            <div class="d07-01-03-after"><span>AFTER ✨</span></div>
            <div class="d07-01-03-before"><span>BEFORE 🌫️</span></div>
            <div class="d07-01-03-line"></div>
          </div>
          <input class="d07-01-03-range" type="range" min="0" max="100" value="50" aria-label="比較スライダー">
        </div>

.d07-01-03-wrap{width:230px;display:flex;flex-direction:column;gap:10px}
        .d07-01-03-box{position:relative;width:100%;height:150px;border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.15)}
        .d07-01-03-after,.d07-01-03-before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;letter-spacing:.05em}
        .d07-01-03-after{background:linear-gradient(135deg,#10b981,#3b82f6)}
        .d07-01-03-before{background:linear-gradient(135deg,#9ca3af,#4b5563);clip-path:inset(0 50% 0 0)}
        .d07-01-03-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.4);transform:translateX(-50%);pointer-events:none}
        .d07-01-03-range{width:100%;accent-color:#3b82f6;cursor:pointer}

(function(){
        var root=document.querySelector('#item-07-01-03 .d07-01-03-wrap');if(!root)return;
        var range=root.querySelector('.d07-01-03-range');
        var before=root.querySelector('.d07-01-03-before');
        var line=root.querySelector('.d07-01-03-line');
        range.addEventListener('input',function(){
          var v=range.value;
          before.style.clipPath='inset(0 '+(100-v)+'% 0 0)';
          line.style.left=v+'%';
        });
      })();