Image Comparison Slider (Horizontal)

Galleries 811

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Image Comparison Slider (Horizontal) to your project and fits it to your theme.

Code

How Image Comparison Slider (Horizontal) is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// 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://cdn.21st.dev/assets/mirror/05/0556b3e0953faa718b15934a7aa515d98f2d94d2d497648f01a782b09625ce63.jpg"
          rightImage="https://cdn.21st.dev/assets/mirror/05/0556b3e0953faa718b15934a7aa515d98f2d94d2d497648f01a782b09625ce63.jpg"
          altLeft="A colorful mountain landscape at night"
          altRight="The same mountain landscape in black and white"
        />
      </div>
    </div>
  );
}