Image Comparison Slider Vertical

Component 115

About

Vertical Image Comparison Slider – Interactive before/after viewer. Allows users to compare two images with a draggable vertical 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 Vertical to your project and fits it to your theme.

Code

How Image Comparison Slider Vertical 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-vertical"; // Adjust the import path

export default function ImageComparisonSliderDemo() {
  return (
    <div className="w-full max-w-2xl mx-auto">
      <div className="aspect-[3/4] rounded-lg border overflow-hidden">
        <ImageComparisonSlider
          topImage="https://cdn.21st.dev/assets/mirror/d4/d41cb066f096612ed08bd8c91cee1458ee5d4309ddb25a2ef3b7953f4377223e.png"
          bottomImage="https://cdn.21st.dev/assets/mirror/e8/e80a97aefd6a33fbcf8123182e3f121f52089484bc48c8fb19a686b4c58aa6c9.jpg"
          altTop="A colorful historic building facade"
          altBottom="The same building facade in black and white"
        />
      </div>
    </div>
  );
}