Comparison Slider compares two visual layers with a draggable vertical divider. Use it for before-and-after images, photo edits, design changes, product variations, UI before-and-after states, image processing results, maps, reports, and other visual diffs.
Use it for:
- Comparing a baseline image with an edited or changed image.
- Showing two matching visual states in the same size and perspective.
- Letting users drag the handle to reveal more of the before or after layer.
- Setting the starting divider position with
initialPosition.
Always give the slider a stable width and height or aspect ratio. The before and after layers should match in size and perspective. Do not use Comparison Slider as a gallery, carousel, image viewer, range input, data table comparison, or text comparison tool.