Image Comparison Slider
2枚の画像を重ねて表示し、スライダーをドラッグして比較できるコンポーネント。ビフォーアフター比較に最適です。
npx shadcn@latest add https://imaimai-ui.vercel.app/r/image-comparison-slider.json実際に動作するコンポーネントです。インタラクションを試してみてください。
基本
2枚の画像を重ねて表示し、スライダーをドラッグして比較できます。マウスドラッグ、タッチ操作、キーボード（左右矢印キー）での操作に対応しています。
After
Before
ラベルなし
beforeLabel と afterLabel を省略すると、ラベルが表示されません。
初期位置カスタマイズ
initialPosition props でスライダーの初期位置を指定できます（0-100のパーセンテージ）。
75%
25%
色のカスタマイズ
sliderClassName と handleClassName props でスライダーとハンドルのスタイルをカスタマイズできます。任意のTailwind CSSクラスを指定可能です。
デフォルト
bg-secondary でカスタマイズ
