Reactで、2枚の画像をつまみで見比べる表示を作る方法

import { useRef, useState } from 'react';
import type { KeyboardEvent, PointerEvent } from 'react';

type Props = {
  before: string;
  after: string;
  beforeAlt: string;
  afterAlt: string;
  // 境目の最初の位置（左端からの %）
  initial?: number;
  onChange?: (position: number) => void;
};

const clamp = (n: number, min: number, max: number) => Math.min(Math.max(n, min), max);

export function ImageCompare({ before, after, beforeAlt, afterAlt, initial = 50, onChange }: Props) {
  // 境目の位置は、幅に対する % で持つ（画面の幅が変わっても同じ所を指す）
  const [position, setPosition] = useState(initial);
  const rootRef = useRef<HTMLDivElement>(null);
  const handleRef = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);

  function update(next: number) {
    const p = clamp(next, 0, 100);
    setPosition(p);
    onChange?.(p);
  }

  // ポインターの位置を、幅に対する % に直す
  function toPercent(e: PointerEvent) {
    const r = rootRef.current!.getBoundingClientRect();
    return ((e.clientX - r.left) / r.width) * 100;
  }

  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
    if (e.button !== 0) return;
    dragging.current = true;
    // ポインターが画像の外へ出ても、離すまでこの要素にイベントが届くようにする
    e.currentTarget.setPointerCapture(e.pointerId);
    // 押した所へ境目を動かし、続けて矢印キーでも動かせるようにつまみへフォーカスする
    update(toPercent(e));
    handleRef.current?.focus();
    e.preventDefault();
  }

  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
    if (dragging.current) update(toPercent(e));
  }

  function handlePointerUp() {
    dragging.current = false;
  }

  // 矢印キーで 1% ずつ、Shift を押しながらなら 10% ずつ。Home と End で端へ
  function handleKeyDown(e: KeyboardEvent) {
    const step = e.shiftKey ? 10 : 1;
    const next = {
      ArrowLeft: position - step,
      ArrowDown: position - step,
      ArrowRight: position + step,
      ArrowUp: position + step,
      Home: 0,
      End: 100,
    }[e.key];
    if (next === undefined) return;
    e.preventDefault();
    update(next);
  }

  const rounded = Math.round(position);

  return (
    <div
      ref={rootRef}
      className="compare"
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
      onPointerUp={handlePointerUp}
      onPointerCancel={handlePointerUp}
    >
      {/* 下に敷く画像。この画像の大きさが、全体の大きさになる */}
      <img src={after} alt={afterAlt} />
      {/* 上に重ねる画像。右側を clip-path で隠し、境目より左だけを見せる */}
      <img
        className="compare-before"
        src={before}
        alt={beforeAlt}
        style={{ clipPath: `inset(0 ${100 - position}% 0 0)` }}
      />
      <div
        ref={handleRef}
        className="compare-handle"
        role="slider"
        tabIndex={0}
        aria-label="2枚の画像の境目"
        aria-valuemin={0}
        aria-valuemax={100}
        aria-valuenow={rounded}
        aria-valuetext={`左の画像を ${rounded}% 表示`}
        onKeyDown={handleKeyDown}
        style={{ left: `${position}%` }}
      />
    </div>
  );
}

.compare {
  position: relative;
  max-width: 600px;
  overflow: hidden;
  cursor: ew-resize;
  /* タッチでドラッグしたときに、ページが横にスクロールしないようにする */
  touch-action: pan-y;
  user-select: none;
}
.compare img { display: block; width: 100%; height: auto; }
/* 上に重ねる画像は、下の画像とぴったり同じ位置・大きさにする */
.compare .compare-before {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
}

/* 境目の縦線と、まん中の丸いつまみ */
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #fff;
}
.compare-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #067a98;
  box-sizing: border-box;
}
.compare-handle:focus-visible { outline: none; }
.compare-handle:focus-visible::after { box-shadow: 0 0 0 3px #00c8e8; }

import { useState } from 'react';
import { ImageCompare } from './ImageCompare';

export function App() {
  const [position, setPosition] = useState(50);
  return (
    <main>
      <ImageCompare
        before="before.png"
        after="after.png"
        beforeAlt="モノクロの風景"
        afterAlt="カラーの風景"
        onChange={setPosition}
      />
      <p className="compare-info">モノクロの範囲：{Math.round(position)}%</p>
    </main>
  );
}

画面上の画像の大きさ: 600×400
モノクロの範囲：50% / aria-valuenow 50
y=100 の行: 幅 600px のうち、左から 300px がモノクロ（それより右にモノクロの画素: 0）

画像の左から 25% の所をクリック: モノクロの範囲：25% / aria-valuenow 25
y=100 の行: 幅 600px のうち、左から 150px がモノクロ（それより右にモノクロの画素: 0）
つまみを 80% の所までドラッグ中: モノクロの範囲：80% / aria-valuenow 80
y=600 の行: 幅 600px のうち、左から 480px がモノクロ（それより右にモノクロの画素: 0）

幅 640px: モノクロの範囲：30% / aria-valuenow 30 / 画像の幅 600px、縦線の中心は左から 30.0% / y=100 の行: 幅 600px のうち、左から 180px がモノクロ（それより右にモノクロの画素: 0）
幅 360px に変更: モノクロの範囲：30% / aria-valuenow 30 / 画像の幅 320px、縦線の中心は左から 30.0% / y=100 の行: 幅 320px のうち、左から 96px がモノクロ（それより右にモノクロの画素: 0）

// 比べるための書き方：clip-path の代わりに、上の画像を包む要素の幅を変える
import { useState } from 'react';

export function WidthCompare({ before, after }: { before: string; after: string }) {
  const [position] = useState(30);
  return (
    <div className="compare">
      <img src={after} alt="カラーの風景" />
      <div className="width-wrap" style={{ position: 'absolute', inset: 0, width: `${position}%`, overflow: 'hidden' }}>
        <img className="width-before" src={before} alt="モノクロの風景" />
      </div>
    </div>
  );
}

画像全体: 600×400 / 上の画像: 180×120
y=100 の行: 幅 600px のうち、左から 180px がモノクロ（それより右にモノクロの画素: 0）
clip-path の場合の上の画像: 600×400

あり: 50% の所から画像の右の外までドラッグして離す: モノクロの範囲：100% / aria-valuenow 100 / 押さずに 20% の所へ戻る: モノクロの範囲：100% / aria-valuenow 100
なし: 50% の所から画像の右の外までドラッグして離す: モノクロの範囲：98% / aria-valuenow 98 / 押さずに 20% の所へ戻る: モノクロの範囲：20% / aria-valuenow 20

あり: 25% の所をクリック → フォーカス: compare-handle / mousedown: なし / 続けて → を2回: モノクロの範囲：27% / aria-valuenow 27
なし: 25% の所をクリック → フォーカス: BODY / mousedown: mousedown / 続けて → を2回: モノクロの範囲：25% / aria-valuenow 25

50% の所をクリックしてから → を3回: モノクロの範囲：53% / aria-valuenow 53
Shift + ←: モノクロの範囲：43% / aria-valuenow 43
End: モノクロの範囲：100% / aria-valuenow 100
Home: モノクロの範囲：0% / aria-valuenow 0
さらに ←: モノクロの範囲：0% / aria-valuenow 0
Tab で離れて Shift+Tab で戻ったときのフォーカス: compare-handle