Compare

A before/after image comparison slider with hover and drag modes, plus optional autoplay.

Basic Usage (Hover Mode)

Move your mouse over the component to reveal the comparison. The slider follows your cursor.

Drag Mode

Click and drag to control the slider position. Set slideMode="drag".

Autoplay

Enable automatic animation with autoplay. Hover to pause.

Custom Initial Position

Set the starting position with initialSliderPercentage.

Without Handlebar

Hide the drag handle with showHandlebar={false}.

With Event Callback

Track the slider position with the onpercentagechange callback.

Current position: 50.0%

Custom Content

Use snippets to render custom content instead of images.

Before

After

Different Sizes

Customize dimensions with the class prop.