Before and After Photo Maker

<div class="ba-slider" data-direction="horizontal" data-handle="circle" style="--ba-pos:50%;aspect-ratio:1000 / 667">
  <img src="https://example.com/after.jpg" alt="After" loading="lazy" decoding="async">
  <div class="ba-before">
    <img src="https://example.com/before.jpg" alt="Before" loading="lazy" decoding="async">
    <span class="ba-label ba-top ba-left" aria-hidden="true">Before</span>
  </div>
  <div class="ba-after-side"><span class="ba-label ba-top ba-right" aria-hidden="true">After</span></div>
  <input class="ba-range" type="range" min="0" max="100" step="1" value="50" aria-label="Compare before and after photos" aria-orientation="horizontal" aria-valuetext="50% before, 50% after">
  <span class="ba-line" aria-hidden="true"><span class="ba-knob"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M237.66 133.66l-32 32a8 8 0 0 1-11.32-11.32L212.69 136H43.31l18.35 18.34a8 8 0 0 1-11.32 11.32l-32-32a8 8 0 0 1 0-11.32l32-32a8 8 0 0 1 11.32 11.32L43.31 120h169.38l-18.35-18.34a8 8 0 0 1 11.32-11.32l32 32a8 8 0 0 1 0 11.32z"/></svg></span></span>
</div>
<p class="ba-credit">Slider made with <a href="https://www.airoomdesignapp.com/tools/before-and-after-slider">AI Room Designer</a></p>
<style>
.ba-slider{position:relative;overflow:hidden;width:100%;border-radius:8px;background:#e9e6df;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.ba-slider[data-direction=vertical]{cursor:ns-resize}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;pointer-events:none;-webkit-user-drag:none}
.ba-before,.ba-after-side{position:absolute;inset:0;pointer-events:none}
.ba-before{clip-path:inset(0 calc(100% - var(--ba-pos)) 0 0)}
.ba-after-side{clip-path:inset(0 0 0 var(--ba-pos))}
.ba-slider[data-direction=vertical] .ba-before{clip-path:inset(0 0 calc(100% - var(--ba-pos)) 0)}
.ba-slider[data-direction=vertical] .ba-after-side{clip-path:inset(var(--ba-pos) 0 0 0)}
.ba-label{position:absolute;margin:12px;padding:4px 8px;border-radius:6px;background:rgba(255, 255, 255, 0.95);color:#1c1b19;font:600 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 1px 3px rgba(0, 0, 0, 0.28)}
.ba-top{top:0}.ba-bottom{bottom:0}.ba-left{left:0}.ba-right{right:0}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.ba-line{position:absolute;top:0;bottom:0;left:var(--ba-pos);width:2px;margin-left:-1px;background:#ffffff;box-shadow:0 0 4px rgba(0, 0, 0, 0.28);pointer-events:none}
.ba-slider[data-direction=vertical] .ba-line{left:0;right:0;bottom:auto;top:var(--ba-pos);width:auto;height:2px;margin:-1px 0 0}
.ba-knob{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:#ffffff;color:#1c1b19;box-shadow:0 2px 8px rgba(0, 0, 0, 0.28);pointer-events:auto;touch-action:none}
.ba-knob svg{width:22px;height:22px}
.ba-slider[data-direction=vertical] .ba-knob svg{transform:rotate(90deg)}
.ba-slider[data-handle=square] .ba-knob{border-radius:8px}
.ba-slider[data-handle=line] .ba-line{width:4px;margin-left:-2px}
.ba-slider[data-direction=vertical][data-handle=line] .ba-line{width:auto;height:4px;margin:-2px 0 0}
.ba-slider[data-handle=line] .ba-knob{background:transparent;box-shadow:none}
.ba-slider[data-handle=line] .ba-knob svg{display:none}
.ba-range:focus-visible+.ba-line .ba-knob{outline:3px solid #2f55d4;outline-offset:2px}
.ba-credit{margin:6px 0 0;font:12px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#5f5b55}
.ba-credit a{color:inherit}
</style>
<script>
(function () {
  document.querySelectorAll(".ba-slider:not([data-ba-ready])").forEach(function (root) {
    root.setAttribute("data-ba-ready", "");
    var range = root.querySelector(".ba-range");
    var knob = root.querySelector(".ba-knob");
    var vertical = root.getAttribute("data-direction") === "vertical";
    var dragging = false;
    function set(pos) {
      pos = Math.max(0, Math.min(100, pos));
      root.style.setProperty("--ba-pos", pos + "%");
      range.value = String(Math.round(vertical ? 100 - pos : pos));
      range.setAttribute("aria-valuetext", Math.round(pos) + "% before, " + Math.round(100 - pos) + "% after");
    }
    function fromPointer(event) {
      var box = root.getBoundingClientRect();
      set(vertical ? ((event.clientY - box.top) / box.height) * 100 : ((event.clientX - box.left) / box.width) * 100);
    }
    range.addEventListener("input", function () {
      set(vertical ? 100 - Number(range.value) : Number(range.value));
    });
    root.addEventListener("pointerdown", function (event) {
      if (event.pointerType === "mouse" && event.button !== 0) return;
      if (vertical && event.pointerType !== "mouse" && !knob.contains(event.target)) return;
      dragging = true;
      root.setPointerCapture(event.pointerId);
      if (event.pointerType === "mouse") fromPointer(event);
    });
    root.addEventListener("pointermove", function (event) {
      if (dragging) fromPointer(event);
    });
    function stop() { dragging = false; }
    root.addEventListener("pointerup", stop);
    root.addEventListener("pointercancel", stop);
    set(parseFloat(root.style.getPropertyValue("--ba-pos")) || 50);
  });
})();
</script>

Example links are filled in until you add your own.