Before and after image slider
Drag the center line to compare two versions of an image; it works with arrow keys and on touch screens.
Settings
Code
<div class="uv-mba"><div class="im a" aria-hidden="true"><svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice"><ellipse cx="70" cy="45" rx="34" ry="10" fill="#fff" opacity=".85"/><ellipse cx="150" cy="30" rx="24" ry="7" fill="#fff" opacity=".7"/><circle cx="240" cy="62" r="22" fill="#fde047"/><path d="M0 120C40 95 80 100 120 110S200 80 250 95 300 105 320 100V200H0Z" fill="#65a30d"/><path d="M0 150C50 120 110 140 160 135S260 120 320 140V200H0Z" fill="#3f6212"/><ellipse cx="205" cy="178" rx="92" ry="13" fill="#38bdf8"/><rect x="70" y="116" width="4" height="22" fill="#422006"/><circle cx="72" cy="110" r="13" fill="#166534"/><rect x="246" y="126" width="26" height="18" fill="#f8fafc"/><path d="M242 128l17-12 17 12z" fill="#dc2626"/></svg></div><div class="im b" aria-hidden="true"><svg viewBox="0 0 320 200" preserveAspectRatio="xMidYMid slice"><ellipse cx="70" cy="45" rx="34" ry="10" fill="#fff" opacity=".85"/><ellipse cx="150" cy="30" rx="24" ry="7" fill="#fff" opacity=".7"/><circle cx="240" cy="62" r="22" fill="#fde047"/><path d="M0 120C40 95 80 100 120 110S200 80 250 95 300 105 320 100V200H0Z" fill="#65a30d"/><path d="M0 150C50 120 110 140 160 135S260 120 320 140V200H0Z" fill="#3f6212"/><ellipse cx="205" cy="178" rx="92" ry="13" fill="#38bdf8"/><rect x="70" y="116" width="4" height="22" fill="#422006"/><circle cx="72" cy="110" r="13" fill="#166534"/><rect x="246" y="126" width="26" height="18" fill="#f8fafc"/><path d="M242 128l17-12 17 12z" fill="#dc2626"/></svg></div><span class="tg l" aria-hidden="true">Before</span><span class="tg r" aria-hidden="true">After</span><i class="hd" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l-5 6 5 6M15 6l5 6-5 6"/></svg></i><input type="range" min="0" max="100" step="0.1" value="50" aria-label="Compare before and after"></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
Photographers, retouchers and renovation companies use this slider to show their work. A dull, washed out version of a landscape sits on the left and the vivid edit on the right, separated by a line with a round handle. A short sweep when it appears hints that the line can be dragged, and labels mark each side.
An invisible native range input covers the whole image, so dragging anywhere, tapping, or using arrow keys all move the divider with proper accessibility. Swap the drawn scene for two real photos with matching framing.