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

解説

1 枚のスライダーを左右に動かして、ビフォーとアフターの 2 画面を見比べられる比較スライダーです。同じ枠の中にアフター層とビフォー層を重ね、上に乗せたビフォー層の width をスライダーの値に合わせて変えることで、境界線が動いて下のアフターが現れる仕組み。操作には透明な input type=range を枠全体に重ね、input イベントで value を読み取って幅へ反映します。ビフォー側に overflow:hidden を掛けているので、幅を縮めても文字や画像が切れて隠れ、はみ出しません。

相性の良い用途

• リフォームや清掃の施工前後
• 美容・エステの施術ビフォーアフター
• レタッチや加工の補正前後の見せ方

実画像に差し替えるときは、各層の background を写真の background-image に置き換え、文字ラベルを外せばそのまま使えます。初期位置は range の value とビフォー層の初期 width（ともに 50）を揃えて変えられます。注意点として、2 枚の画像は必ず同じ被写体・同じ画角で撮ると比較として伝わります。タッチ操作でも range なので扱えますが、つまみが見えると分かりやすいため、境界に縦線やハンドルの装飾を足すと操作性が上がります。

使用例・適したシーン

• 施工事例の比較
• リフォームのビフォーアフター
• 美容・施術の症例