Animated Image Comparison Slider
Interactive before/after image comparison slider with smooth animations and responsive design, perfect for showcasing transformations and improvements.
Responsive Design
Yes
Dark Mode Support
No
lines
343
Browser Compatibility
Chrome · Firefox · Safari · Edge
Live Preview
Interact with the component without leaving the page.
HTML
25
lines
CSS
225
lines
JavaScript
93
lines
<div class="comparison-container">
<div class="comparison-demo">
<div class="comparison-header">
<h2>Before & After Comparison</h2>
<p>Drag the slider to see the transformation</p>
</div>
<div class="image-comparison" id="imageComparison">
<div class="image-container">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop" alt="After" class="after-image">
<img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=600&h=400&fit=crop" alt="Before" class="before-image">
<div class="slider-handle" id="sliderHandle" role="slider" tabindex="0" aria-label="Image comparison slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-describedby="comparisonHint">
<div class="handle-line"></div>
<div class="handle-label">Drag Me</div>
</div>
</div>
<div class="comparison-labels">
<div class="label before-label">Before</div>
<div class="label after-label">After</div>
</div>
<p class="sr-only" id="comparisonHint">Use left and right arrow keys to move the slider</p>
</div>
</div>
</div>
Browser Compatibility
Chrome
≥ 50
Firefox
≥ 45
Safari
≥ 10
Edge
≥ 15