Before / after slider

Pro

Draggable, keyboard accessible comparison slider for renovations, staging and remodel photos.

app/page.tsx

import { BeforeAfterSlider } from "@/components/facade/before-after-slider";

export default function Demo() {
  return (
    <figure className="w-full max-w-[640px]">
      <BeforeAfterSlider defaultValue={52} label="Kitchen renovation comparison" />
      <figcaption className="mt-4 flex flex-wrap items-baseline justify-between gap-2 text-sm">
        <span className="font-medium text-foreground">Kitchen remodel, 1984 ranch in Scottsdale, AZ</span>
        <span className="text-muted-foreground">8 weeks · $64,500 · Drag or use arrow keys</span>
      </figcaption>
    </figure>
  );
}

Installation

$npx shadcn@latest add @facade/before-after-slider

Pro items install from the private @facade registry with your license key. Set it up once.

Usage

import { BeforeAfterSlider } from "@/components/facade/before-after-slider";

export default function Page() {
  return <BeforeAfterSlider />;
}

Props

BeforeAfterSliderProps is exported, so you can extend or wrap it. Every prop has a default; <BeforeAfterSlider /> renders the example above.

Props of BeforeAfterSlider
Prop	Type	Description
beforeSrc	string	Image URL for the "before" state. Falls back to an illustrated dated room.
afterSrc	string	Image URL for the "after" state. Falls back to an illustrated renovated room.
beforeAlt	string
afterAlt	string
beforeLabel	string
afterLabel	string
defaultValue	number	Initial handle position, 0 to 100.
step	number	Keyboard step in percent. Shift multiplies by 5.
onValueChange	(value: number) => void
label	string	Accessible name for the slider.
className	string

Ask your agent

With the Facade MCP server connected, this prompt is enough:

Add the Facade before / after slider to this page and adapt the copy to our business.