Effect 9 - Image Compare Slider

Pro

A before/after image comparison slider with a draggable handle to reveal differences between two images.

Theme

Upgrade to Pro

Image Compare Slider

Drag the slider to compare before and after images. Perfect for showcasing transformations, edits, or design changes.

Before: Grayscale • After: Full Color

Loading code...

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Failed to load code. Please try again.

Usage

<Effect9
  initial-position={50}
/>

prop	type	default	description
`beforeSrc`	`ImageMetadata \| string`	`required`	Source for the before image shown on the left side of the comparison.
`afterSrc`	`ImageMetadata \| string`	`required`	Source for the after image shown on the right side of the comparison.
`beforeAlt`	`string`	`"Before"`	Alt text for the before image.
`afterAlt`	`string`	`"After"`	Alt text for the after image.
`initialPosition`	`number`	`50`	Initial before-image reveal position from 0 to 100 percent.