Components
Image Comparison Slider (Horizontal)
Horizontal Image Comparison Slider – Interactive before/after viewer. Allows users to compare two images with a draggable horizontal handle. Perfect for showcasing edits, retouching, or visual transformations in photography, design, or beauty apps.
// image-comparison-slider/demos/default/code.demo.tsx
import { ImageComparisonSlider } from "@/components/ui/image-comparison-slider-horizontal"; // Adjust the import path
export default function ImageComparisonSliderDemo() {
return (
<div className="w-full max-w-4xl mx-auto">
<div className="rounded-lg border overflow-hidden aspect-[16/9]">
<ImageComparisonSlider
leftImage="https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1400&auto=format&fit=crop"
rightImage="https://images.unsplash.com/photo-1519681393784-d120267933ba?q=80&w=1400&auto=format&fit=crop&monochrome=true&greyscale=true"
altLeft="A colorful mountain landscape at night"
altRight="The same mountain landscape in black and white"
/>
</div>
</div>
);
}