Before/After Comparison Slider

Overview
The Before/After Comparison Slider: A Custom AEM Component for Interactive Image Comparisons

Before/After Comparison Slider Before/After Comparison Slider Before/After Comparison Slider

The Before/After Comparison Slider is a custom AEM component that allows users to create interactive comparison sliders with two images. It is ideal for highlighting transformations, showcasing product benefits, or illustrating differences between two states.

Features

Displays a comparison slider for two images.
Supports horizontal and vertical orientations.
Customizable before/after labels.
Adjustable slider handle to compare images dynamically.
Caption support for adding descriptive text below the comparison.
Customizable colors for labels and handle elements.

Functionality

Allows users to compare two images interactively.
Users can drag the handle to reveal more of either image.
Customizable styling to match branding requirements.

Dialog Properties

1. General Configuration

Image Before – Option to add the left-side image.
Image After – Option to add the right-side image.
Handle Text – Option to add text for the handle.
Orientation – Option to choose the handle orientation:
- Horizontal – The handle moves horizontally.
- Vertical – The handle moves vertically.
Default Offset – Sets the initial position of the handle. (For example, setting it to 50% places the handle in the middle of both images.)

2. Style Configuration

Handle Top Offset – Adjusts the position of the handle text within the comparison slider. (Setting it to 50% centers the text within the handle.)
Circle Size – Option to set the size of the handle’s circular area.
Border Size – Option to set the thickness of the slider border.
Handle Text Color – Option to set the color of the handle text.
Handle Color – Option to set the handle color, including the circular area.

Usage Instructions

Add the component to an AEM page.
Upload the before and after images.
Configure the handle text, orientation, and offset as needed.
Adjust styling options for a customized appearance.
Preview and publish to enable interactive comparisons

Additional Notes

Ensure images are of equal dimensions for a seamless transition.
Optimize images to maintain page performance.

Conclusion

This component enhances user experience by enabling interactive visual comparisons. It is flexible, customizable, and easy to configure within AEM’s authoring environment.

Take the next step

Curious but Not Convinced? Reach out to us! Let’s build something extraordinary together. Partner with us and discover the difference.

Bite sized conversation

Business Enquiry

Send us a email

General Enquiry

Send us a email saying hello

Social connect