Build engaging before-after comparisons with this interactive slider component. Perfect for interior designers, photographers, fitness coaches, or SaaS platforms. Users can drag the slider handle or click anywhere on the image to reveal transformations instantly, with touch support for mobile devices.

Customization

The slider uses only a few lines of JavaScript and the CSS clip-path property to create smooth transitions between the before and after images. While our demo showcases interior design renovations, the slider component can be adapted to display any content - just swap the before and after images.

Get started

Download the .bsdesign file from the button above, and open it in Bootstrap Studio to customize the entire layout using our powerful visual editor.