Voor/na met verticale slider Nieuw

<!-- Voor/na met verticale slider · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="vba"><div class="vba__box" style="--p:45%">
<div class="vba__l vba__l--voor"><div class="vba__fac"><i></i><i></i><i></i><i></i><i></i><i></i><b></b></div></div>
<div class="vba__l vba__l--na"><div class="vba__fac"><i></i><i></i><i></i><i></i><i></i><i></i><b></b></div></div>
<div class="vba__hd" role="slider" tabindex="0" aria-label="Schuif tussen na en voor" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45"><span class="vba__knob"><svg viewBox="0 0 12 16" width="10" height="14" aria-hidden="true"><path d="M2 6l4-4 4 4M2 10l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></span></div>
<span class="vba__tag vba__tag--na">Na · 2025</span><span class="vba__tag vba__tag--voor">Voor · 2024</span></div>
<div class="vba__meta"><b>Gevelrenovatie Schiedam</b><span>Isolatie, nieuwe kozijnen · label E naar A</span></div></div>
</div>

/* Voor/na met verticale slider · NedDev · eigen werk. */
.vba{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;padding:10px 12px;display:flex;flex-direction:column;gap:7px;container-type:inline-size}
.vba__box{position:relative;flex:1;min-height:0;border-radius:5px;overflow:hidden;cursor:ns-resize;touch-action:none;user-select:none;-webkit-user-select:none}
.vba__l{position:absolute;inset:0}
.vba__l--na{clip-path:inset(0 0 calc(100% - var(--p)) 0)}
.vba__l--voor{background:linear-gradient(115deg,transparent 47.6%,#8a8277 47.8% 48.1%,transparent 48.3%) 0 0/60% 70% no-repeat,radial-gradient(40% 30% at 22% 28%,rgba(90,80,70,.2),transparent),radial-gradient(30% 40% at 80% 70%,rgba(90,80,70,.16),transparent),#c9c3b8}
.vba__l--na{background:linear-gradient(to bottom,#5a524c 0 1px,transparent 1px) 0 0/100% 8px,conic-gradient(from 270deg at 1px 8px,#5a524c 0 90deg,transparent 0) 0 0/24px 16px,conic-gradient(from 270deg at 1px 8px,#5a524c 0 90deg,transparent 0) 12px 8px/24px 16px,#3a3430}
.vba__fac{position:absolute;left:10%;right:10%;top:9%;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr 1.2fr;gap:12% 14%}
.vba__fac i{display:block}
.vba__fac b{grid-column:2;grid-row:3;align-self:end;height:84%;display:block}
.vba__fac i:nth-child(4),.vba__fac i:nth-child(6){grid-row:3}.vba__fac i:nth-child(5){display:none}
.vba__l--voor .vba__fac i{background:linear-gradient(90deg,transparent 47%,#f2efe9 47% 53%,transparent 53%),#6f7d86;border:3px solid #f2efe9}
.vba__l--voor .vba__fac b{background:#7a5a43;border:3px solid #f2efe9;border-bottom:0}
.vba__l--na .vba__fac i{background:linear-gradient(135deg,#2c3438,#141819);border:3px solid #0a0a0a;box-shadow:0 3px 0 #F5480F}
.vba__l--na .vba__fac b{background:#0a0a0a;border:3px solid #0a0a0a;border-bottom:0;box-shadow:inset -6px 0 0 #F5480F}
.vba__hd{position:absolute;left:0;right:0;top:var(--p);height:0;z-index:2;outline:none}
.vba__hd::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#fff;box-shadow:0 0 0 1px rgba(10,10,10,.15)}
.vba__knob{position:absolute;left:50%;top:0;width:42px;height:24px;margin:-12px 0 0 -21px;border-radius:999px;background:#fff;color:#0a0a0a;display:grid;place-items:center;box-shadow:0 4px 14px -4px rgba(10,10,10,.5);transition:transform .2s,background .2s,color .2s}
.vba__box:hover .vba__knob,.vba__hd:focus-visible .vba__knob{background:#F5480F;color:#fff}
.vba.is-drag .vba__knob{transform:scale(1.1)}
.vba__tag{position:absolute;left:8px;z-index:1;font:600 9px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:3px}
.vba__tag--na{top:8px;background:#F5480F;color:#fff}.vba__tag--voor{bottom:8px;background:#fff;color:#0a0a0a}
.vba__meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px}
.vba__meta b{font-weight:700;white-space:nowrap}
.vba__meta span{font:500 9.5px 'JetBrains Mono',monospace;color:#6b6762;text-align:right}
@container (max-width:380px){.vba__meta span{display:none}}

// Voor/na met verticale slider · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.vba')||root;
var box=root.querySelector('.vba__box'),hd=root.querySelector('.vba__hd'),p=45,touched=false,drag=false;
function set(v){p=Math.max(0,Math.min(100,v));box.style.setProperty('--p',p.toFixed(2)+'%');hd.setAttribute('aria-valuenow',Math.round(p));hd.setAttribute('aria-valuetext',Math.round(p)+' procent na');}
function fromE(e){var r=box.getBoundingClientRect();set((e.clientY-r.top)/r.height*100);}
box.addEventListener('pointerdown',function(e){touched=true;drag=true;root.classList.add('is-drag');box.setPointerCapture(e.pointerId);fromE(e);});
box.addEventListener('pointermove',function(e){if(drag)fromE(e);});
function end(){drag=false;root.classList.remove('is-drag');}
box.addEventListener('pointerup',end);box.addEventListener('pointercancel',end);
hd.addEventListener('keydown',function(e){var d={ArrowUp:-5,ArrowDown:5,PageUp:-20,PageDown:20}[e.key];if(e.key==='Home'){e.preventDefault();touched=true;set(0);}if(e.key==='End'){e.preventDefault();touched=true;set(100);}if(d){e.preventDefault();touched=true;set(p+d);}});
set(45);
if(!matchMedia('(prefers-reduced-motion: reduce)').matches){var K=[[0,45],[700,22],[1500,74],[2300,50]],t0=0;
setTimeout(function(){requestAnimationFrame(function f(now){if(touched)return;if(!t0)t0=now;var t=now-t0;if(t>=K[K.length-1][0]){set(50);return;}
for(var k=0;k<K.length-1;k++){if(t<K[k+1][0]){var a=K[k],b=K[k+1],u=(t-a[0])/(b[0]-a[0]);u=u<.5?2*u*u:1-Math.pow(-2*u+2,2)/2;set(a[1]+(b[1]-a[1])*u);break;}}requestAnimationFrame(f);});},600);}
}
init(document.querySelector('.jouw-container'));