BeforeAfterImgSlider
An interactive and fully customizable slider to compare two images. Drag the handle to reveal the "after" image, with unique options to set custom backgrounds, colors, and more...
Make it with Workshop
Build your own component with AI
About this Component
Effortlessly compare two images with this fully responsive and highly customizable Before/After Slider component. It's perfect for showcasing transformations, redesigns, or photo edits.
This component is designed to solve common issues with transparent images by allowing you to set a unique, solid background color behind each image, preventing any visual bleed-through.
Take full control over the slider's appearance. You can adjust the slider line width, the color of the line and arrows, and the circular handle's background color to perfectly match your brand. Add optional "Before" and "After" text labels and customize their color and font size for maximum clarity. You can also set the slider's initial starting position and adjust the component's border radius.
It’s fully interactive, supporting both mouse dragging on desktop and touch gestures on mobile devices, ensuring a smooth experience for all users.
