§08-10Content
比較スライダー
2 枚の画像を境界を動かして比べる。
加工前後や新旧の違いを同じ位置で見比べる。並べて置くだけでは差が分かりにくい写真やデザインの比較に向く。
実装のポイント
上の画像を clip-path や幅で切り取り、内側は元の幅を保つ。操作は input type=range を重ねるとキーボードと支援技術の対応が手に入る。
- 特徴
- 状態管理
- デモで使っているもの
- lucide-react
- SVG
§08-10Content
2 枚の画像を境界を動かして比べる。
加工前後や新旧の違いを同じ位置で見比べる。並べて置くだけでは差が分かりにくい写真やデザインの比較に向く。
上の画像を clip-path や幅で切り取り、内側は元の幅を保つ。操作は input type=range を重ねるとキーボードと支援技術の対応が手に入る。