Before/After Slider CTA

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/cta/cta46.tsx instead.

Usage

The file also exports cta46Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Cta46, cta46Demo } from "@/components/blocks/cta/cta46";

export default function Page() {
  return <Cta46 {...cta46Demo} />;
}

Props

Behavior notes

• The comparison slider is a real, fully accessible native <input type="range"> wired to a useState<number>, with a proper <Label htmlFor> (visually hidden, read by screen readers). Its value drives a clip-path: inset(...) on the "after" image layer stacked on top of the "before" image, so dragging the range reveals more or less of the after image.
• Using a native range input (rather than hand-rolled pointer-event drag logic) gives real mouse AND touch support for free, plus a genuinely accessible, keyboard-operable control.
• The call-to-action button is decorative: it renders as a real Next.js Link via the button's render prop, but defaults to "#" and doesn't perform a real navigation of its own.