Free Component
Interactive Before/After Slider
An interactive before/after image comparison slider with a draggable vertical divider bar and dual status badges.
Colours in this gradient
#0f172a#38bdf8#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<div class="comp-slide-stage">
<div class="comp-slide-card">
<div class="comp-slide-box" id="compSlideBox">
<div class="cs-layer cs-before">
<span class="cs-pill pill-before">Raw Prompt</span>
<div class="cs-mock mock-raw">
<code>function compute(x) { return x * 2; }</code>
</div>
</div>
<div class="cs-layer cs-after" id="csAfterLayer">
<span class="cs-pill pill-after">AI Refactored</span>
<div class="cs-mock mock-opt">
<code>export const compute = (x: number): number => x << 1;</code>
</div>
</div>
<div class="cs-handle" id="csHandle">
<div class="cs-line"></div>
<div class="cs-knob">ā</div>
</div>
</div>
</div>
</div>The AI prompt
Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.
Create an interactive before/after split comparison slider in HTML, CSS and vanilla JavaScript. Requirements: - Box container with two overlapping layers. - Top layer revealed using CSS clip-path: inset(0 0 0 X%). - Vertical draggable divider handle with center knob. - Mousemove and touchmove event listeners tracking pointer coordinates. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Layer before and after content absolutely inside relative box.
- 2
Apply clip-path: inset(0 0 0 pct%) on top layer.
- 3
Update clip-path and handle left position on pointer drag.
Customisation tips
- Clamp percentage between 0% and 100% to keep handle within container bounds.