How to make a before and after image slider in React

A before/after slider shows a change better than two photos side by side: retouching, a renovation, a redesign, a skincare result. This tutorial uses ReactFrame's free Compare Slider.

1. Install

npx shadcn@latest add @reactframe/compare-slider

2. Add your two images

The slider fills its parent (up to 900px wide), so give the parent a height:

import { CompareSlider } from "@/components/compare-slider";

export function Renovation() {
  return (
    <div className="h-[480px] w-full overflow-hidden rounded-2xl">
      <CompareSlider
        beforeImage="/projects/kitchen-before.jpg"
        afterImage="/projects/kitchen-after.jpg"
        beforeLabel="Before"
        afterLabel="After"
      />
    </div>
  );
}

3. Adjust it

Keyboard and accessibility

The handle is a focusable slider: the left and right arrow keys move it by 2%, and with Shift by 10% (up and down in vertical mode). Screen readers hear its position as a value from 0 to 100.

Tips for photos that compare well

• Shoot both from the same spot with the same framing. If they don't line up, crop them to match before uploading; the effect falls apart when the edges shift.
• Use the same size and aspect ratio for both files.
• Start the handle where the change is: if the difference is on the right, try initialPosition={30} so the "after" side is mostly visible.
• For product or case study pages, put a one-line caption under the slider saying what changed.