ImgComparisonSlider

This component is part of Framercrafts, a library of supercharged Framer components and overrides.

Description

Image Comparison Slider creates an interactive way to compare two images side by side. Users can drag or click to adjust the divider position, revealing more of one image while hiding the other. The component features a customizable divider line with an optional icon for better visibility and interaction.

Use Cases

1. Before/After Comparisons - Show transformations or changes

2. Design Iterations - Compare different versions of designs

3. Photo Editing - Demonstrate editing effects or filters

4. Product Variants - Display color options or model differences

5. Image Processing - Showcase image enhancement techniques

Customizations

• Images - Left and right images to compare

• Divider Color - Custom color for the dividing line

• Divider Icon - Optional icon to enhance the divider visibility

• Interaction - Click or drag to adjust the comparison position

• Dimensions - Adaptable to different container sizes