Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Build an Image Comparison Slider Component in React

easyreactmouse eventscss clipdragcomponent designpropsAdobeWalmartAmazonUI Component

Prompt

Create a React component that places two images on top of each other and lets the user drag a vertical divider left or right to reveal more of one image and less of the other — a classic before/after comparison view. The component should accept image1, image2, width, and height as props. Both images must fit within the defined dimensions. Track mouse drag events to update the reveal position in real time and constrain it within the component boundaries.

Stack images using absolute positioning, with the second image clipped using clip-path or width on a wrapper.
Test Results

Build an Image Comparison Slider Component in React

Create a React component that places two images on top of each other and lets the user drag a vertical divider left or right to reveal more of one image and less of the other — a classic before/after comparison view. The component should accept image1, image2, width, and height as props. Both images must fit within the defined dimensions. Track mouse drag events to update the reveal position in real time and constrain it within the component boundaries.