The Before and After Slider is a highly versatile, interactive comparison tool for Bubble.io applications. It allows users to showcase visual transformations by juxtaposing two images with a smooth, draggable divider. With extensive customization options and multiple interaction modes, this plugin creates engaging before-and-after experiences for any visual comparison. Perfect for portfolios, product showcases, makeovers, and educational content, this plugin combines elegant functionality with exceptional user experience.
Customize the divider appearance by adjusting its width, color, and optional directional arrows that automatically adapt to your chosen orientation. For a polished presentation, enable labels with custom text and colors, then position them independently using the eight available placement options (top-left, top-center, top-right, left-center, right-center, bottom-left, bottom-center, or bottom-right). Fine-tune the visual experience with the "Fit size" option to control how images fit within the slider, and use the Hide labels on drag feature for a cleaner interface during interaction.
The slider communicates with your Bubble application through its position state (0-100%) and triggers the "Slider moved" event when users interact with it, allowing you to create dynamic workflows based on slider movement. You can also programmatically set the initial divider position through the position property, perfect for showcasing specific aspects of your comparison or creating guided experiences. With its comprehensive customization options and responsive design, the Before and After Slider provides a powerful yet simple solution for creating engaging visual comparisons in any Bubble.io project.

Service URL: https://evorique.com

Live Demo: https://evorique.com/before-after-slider

Demo Editor: https://bubble.io/page?id=evorique-plugins&tab=Design&name=before-after-slider-demo&type=page