ImgComparisonSlider
A component that allows users to compare two images by dragging a divider, with customizable divider appearance and optional icon for enhanced visual feedback.
Make it with Workshop
Build your own component with AI
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
