The Before & After Slider is a mobile-friendly slider that allows you to compare two images by dragging. You can finely adjust nearly every element, such as handle style, label position, image filters, and interaction methods. This allows you to create a polished result that suits the nature of your project.

Main Features

Two Label Styles

Static labels can be freely positioned, while sticky labels can be fixed to the handle for an interactive display.

Complete Label Style Control

You can customize all text elements like fonts, colors, backgrounds, borders, padding, and filters. Fade-out/in effects during dragging are also included.

Image Filters and Fade Effects

Each image can have individual CSS filters (blur, grayscale, sepia, etc.) applied, and you can set a smooth fade-in animation on load.

Handle and Slider Interaction Control

You can adjust the handle size, icon color, drag bar length, and shadow in detail. It also allows configuring responses to user actions such as keyboard control, reset, and hover reactions.

Container Customization

You can freely adjust the style of the entire component, including frame borders, shadows, and padding.

Additional Information

• It can be applied across all industries such as beauty, product redesign, innovation, and medical image comparison.

• It is based on react-compare-slider, making it highly performant and stable.