ビフォーアフター スライダー
2枚の状態を左右に重ねて、スライダーで境目を動かしながら見比べるビフォーアフター用のパーツです。後ろ側（AFTER）の上に前面（BEFORE）を重ね、 range 入力の値に応じて前面の width を変えることで、ドラッグした位置までBEFOREが見える仕組みになっています。
解説
2枚の状態を左右に重ねて、スライダーで境目を動かしながら見比べるビフォーアフター用のパーツです。後ろ側（AFTER）の上に前面（BEFORE）を重ね、range入力の値に応じて前面のwidthを変えることで、ドラッグした位置までBEFOREが見える仕組みになっています。JavaScriptは数行で、inputイベントで幅を書き換えているだけなので動作も軽快です。
向いている使い方
- リフォーム・清掃・美容など施工前後を見せたいページ
- レタッチや加工サービスの効果説明
- デザイン改善のリニューアル事例の比較
サンプルは色付きのdivで代用していますが、実際は中身をimgに差し替えれば写真比較になります。その際、2枚は同じ寸法に揃え、前面側のimgは親の幅に合わせてmax-widthを解除しないことが境目をきれいに見せるコツです。スライダーは標準のフォーム部品なのでキーボードの矢印キーでも動かせ、操作性とアクセシビリティの両立がしやすい構成です。
使用例・適したシーン
- 施工事例の比較
- リフォームのビフォーアフター
- 美容・施術の症例
よくある質問
色のブロックを実際の写真に置き換えるには。
AFTER と BEFORE の各ブロックの中に img 要素を入れ、2枚の画像を同じ縦横サイズに揃えてください。前面側を親要素いっぱいに広げておくと、スライダーで切り取られる境目がずれずにきれいに見えます。
スマホのタッチ操作でも動きますか。
動きます。標準の range スライダーを使っているため、タッチでつまんで左右に動かせます。キーボードの矢印キーでも位置を変えられるので操作方法を選びません。