Compare Slider

Component 6

About

A before/after image comparison slider with a draggable handle, orientation and label support for revealing two overlaid states.

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

Code

How Compare Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import CompareSlider, {
  CompareSliderAfter,
  CompareSliderBefore,
  CompareSliderHandle,
} from "@/components/ui/compare-slider";

export default function CompareSliderVerticalDemo() {
  return (
    <CompareSlider
      defaultValue={50}
      orientation="vertical"
      className="h-[400px] w-full overflow-hidden rounded-lg border"
    >
      <CompareSliderBefore>
        <img
          src="https://cdn.21st.dev/assets/mirror/1c/1ca0aa34f2bd8e8a679771715d3a458726eb7e4d536da171a97966bad0e8aa2b.webp"
          alt="Before"
          className="size-full object-cover"
        />
      </CompareSliderBefore>
      <CompareSliderAfter>
        <img
          src="https://cdn.21st.dev/assets/mirror/b0/b071cbefca4b24f11358d28c15750b1503fda3302d8c5c1ee20095dd8731c149.webp"
          alt="After"
          className="size-full object-cover grayscale"
        />
      </CompareSliderAfter>
      <CompareSliderHandle />
    </CompareSlider>
  );
}