*Instructions:*
Install the Plugin: Add the "Responsive Before & After Image Slider" plugin to your Bubble application from the marketplace.

Add the Element: Drag and drop the "Before After Slider" element onto your page in the Bubble editor.

Configure Properties: Select the element on your page and use the Property Editor to customize its appearance and behavior using the following fields:

Image 1 (Before Image):
Type: Image
Description: Upload or dynamically set the image that will appear on the left side ("Before").

Image 2 (After Image):
Type: Image
Description: Upload or dynamically set the image that will appear on the right side ("After").

Show Labels:
Type: yes/no
Description: Check this box to display the 'Before' and 'After' labels over the images.

Before Label:
Type: text
Description: Enter the custom text for the 'Before' label (e.g., "Original"). Requires "Show Labels" to be checked.

After Label:
Type: text
Description: Enter the custom text for the 'After' label (e.g., "Edited"). Requires "Show Labels" to be checked.

Label Color:
Type: color
Description: Set the text color for both 'Before' and 'After' labels. Requires "Show Labels" to be checked.

Label Background:
Type: color
Description: Set the background color for both 'Before' and 'After' labels. Requires "Show Labels" to be checked.

Enable Hover to Move:
Type: yes/no
Description: Check this box to allow the slider to follow the mouse cursor position when hovering over the image area. The drag functionality remains active regardless of this setting.

Hide Handle Circle:
Type: yes/no
Description: Check this box to hide the circular part of the slider handle, leaving only the central line and directional arrows visible.

Auto Hide Labels on Move:
Type: yes/no
Description: If enabled, the 'Before' and 'After' labels will automatically hide while the slider is being moved (by dragging or hovering) and reappear shortly after movement stops. Requires "Show Labels" to be checked.
Notes on Layout:

The plugin automatically matches its height to the aspect ratio of the 'Before' image. You only need to control the width of the element and its parent containers in Bubble's layout settings.

Ensure the container where you place the slider element is configured correctly in Bubble's responsive layout to give the plugin the desired width.

**Demo Application:**

See a live demo of this plugin in action here:

https://before-and-after-slider.bubbleapps.io/version-test

**Demo App Editor:**

To see how this plugin is implemented in a Bubble workflow, view the demo app's editor here:

https://bubble.io/page?id=before-and-after-slider&test_plugin=1745599420967x694968127656820700_current&tab=Design&name=index