Comparison Slider

Instructions

Overview

Add an interactive before/after image comparison slider to your website with smooth dragging functionality for both mouse and touch interactions.

Getting Started

Quick Start

1. Click the Copy Component button on the top of the page.
2. Paste the component into your Webstudio site.

Manual Start

1. Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/Comparison%20Slider/comparison-slider-v1.0.js"></script>[/code-block]

2. Add the Required Elements: Create a container with three nested elements:

Required Elements

• Container: Add dv-comparison-slider="true" to the main container
• Before Image: First image in the container (no special attribute needed)
• After Image: Add dv-comparison-slider-after-image="true" to the second image
• Handle: Add dv-comparison-slider-handle="true" to the draggable divider element

Styling Tips

• The container should have position: relative and defined dimensions
• Both images should be the same size and have position: absolute
• The handle should have position: absolute and z-index: 10
• Use CSS to style the handle with appropriate width, height, and visual indicators

Notes

• The slider works with both mouse and touch interactions
• The after image is automatically clipped based on the handle position
• The component automatically reinitializes when added to the DOM dynamically
• For best results, use images of the same dimensions
• The handle position defaults to the center of the container