<div class="ba-wrapper" id="baWrapper">
<div class="ba-image-container">
<img src="https://placehold.co/800x500/e2e8f0/1e293b?text=Original+Design" alt="Before" class="ba-img-base">
<div class="ba-img-overlay">
<img src="https://placehold.co/800x500/3b82f6/ffffff?text=New+Design" alt="After" class="ba-img-top">
</div>
</div>
<div class="ba-handle">
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
<svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</div>
<input type="range" min="0" max="100" value="50" class="ba-range" aria-label="Comparison Slider">
</div>
Back to Snippets
Before and After Image Slider JS
Show the difference between two images with this interactive comparison slider. It uses a simple range input to control the reveal, so it works perfectly on touch screens and desktops without heavy code.
367