Prijsschuif met pakketgrenzen New
Hours-per-week slider that calculates the monthly price live and shows where a cheaper rate kicks in.
Schoonmaakbedrijf Helder · Eindhoven
Zoveel uur als u nodig heeft. Hoe meer, hoe lager het uurtarief.
Kantoren, praktijken en winkels. Vaste schoonmaker, vervanging bij ziekte en maandelijks opzegbaar.
Particulier2 tot 7 uur · € 32,00
Kantoor8 tot 19 uur · € 28,50
Vast team20+ uur · € 25,75
Per maand, excl. btw€ 1.234
Uurtarief€ 28,50
How to use it
- Paste the HTML where the page sections should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Prijsschuif met pakketgrenzen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="xsc">
<div class="xsc__inner">
<div class="xsc__text">
<span class="xsc__eyebrow">Schoonmaakbedrijf Helder · Eindhoven</span>
<h2 class="xsc__h">Zoveel uur als u nodig heeft. Hoe meer, hoe lager het uurtarief.</h2>
<p class="xsc__lead">Kantoren, praktijken en winkels. Vaste schoonmaker, vervanging bij ziekte en maandelijks opzegbaar.</p>
</div>
<div class="xsc__card">
<div class="xsc__top"><label for="xsc-r">Uren per week</label><output class="xsc__hrs">10 uur</output></div>
<div class="xsc__track">
<input id="xsc-r" class="xsc__range" type="range" min="2" max="40" step="1" value="10">
<span class="xsc__mark" style="--x:.1579"></span><span class="xsc__mark" style="--x:.4737"></span>
</div>
<div class="xsc__tiers">
<div class="xsc__tier" data-t="0" style="--f:6"><b>Particulier</b><span>2 tot 7 uur · € 32,00</span></div>
<div class="xsc__tier" data-t="1" style="--f:12"><b>Kantoor</b><span>8 tot 19 uur · € 28,50</span></div>
<div class="xsc__tier" data-t="2" style="--f:20"><b>Vast team</b><span>20+ uur · € 25,75</span></div>
</div>
<div class="xsc__out">
<div><span class="xsc__olab">Per maand, excl. btw</span><strong class="xsc__price">€ 1.234</strong></div>
<div class="xsc__rate"><span class="xsc__olab">Uurtarief</span><b class="xsc__uur">€ 28,50</b></div>
</div>
<p class="xsc__nudge" aria-live="polite"></p>
<a href="#" class="xsc__cta">Vraag een kennismaking aan</a>
</div>
</div>
</div>
</div>/* Prijsschuif met pakketgrenzen · NedDev · eigen werk. */
.xsc{background:#eef6f6;color:#0b3c46;font-family:'Switzer',sans-serif;box-sizing:border-box}
.xsc *{box-sizing:border-box}
.xsc__inner{max-width:1120px;margin:0 auto;padding:52px 32px;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.xsc__eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#0e7c86;margin-bottom:16px}
.xsc__h{font-size:clamp(26px,3.2vw,40px);line-height:1.06;letter-spacing:-.02em;font-weight:700;margin:0 0 14px}
.xsc__lead{font-size:16px;line-height:1.55;color:#40636a;margin:0;max-width:40ch}
.xsc__card{background:#fff;border-radius:6px;padding:26px;box-shadow:0 1px 0 rgba(11,60,70,.06),0 20px 40px -28px rgba(11,60,70,.4)}
.xsc__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.xsc__top label{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#5c7c82}
.xsc__hrs{font-size:22px;font-weight:700}
.xsc__track{position:relative;height:26px;display:flex;align-items:center}
.xsc__range{position:relative;z-index:2;width:100%;margin:0;-webkit-appearance:none;appearance:none;height:8px;border-radius:4px;background:linear-gradient(90deg,#0e7c86 var(--p,21%),#dbe9ea var(--p,21%));outline:none}
.xsc__range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#0e7c86;border:5px solid #fff;box-shadow:0 0 0 1.5px #0e7c86;cursor:grab}
.xsc__range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#0e7c86;border:5px solid #fff;box-shadow:0 0 0 1.5px #0e7c86;cursor:grab}
.xsc__range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(14,124,134,.35)}
.xsc__mark{position:absolute;z-index:3;left:calc(13px + (100% - 26px) * var(--x) - 1px);top:3px;width:2px;height:20px;background:#f4a259;pointer-events:none}
.xsc__tiers{display:flex;gap:4px;margin:12px 0 20px}
.xsc__tier{flex:1;min-width:0;padding:8px 9px;border-radius:4px;background:#f3f8f8;border-top:3px solid #dbe9ea;transition:background .25s,border-color .25s}
.xsc__tier b{display:block;font-size:13px}
.xsc__tier span{display:block;font-size:11.5px;color:#5c7c82;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xsc__tier.is-on{background:#e1f2f3;border-color:#0e7c86}
.xsc__out{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;border-top:1px solid #e3eeef;padding-top:16px}
.xsc__olab{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#5c7c82;margin-bottom:4px}
.xsc__price{font-size:40px;line-height:1;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.xsc__rate{text-align:right}.xsc__uur{font-size:18px}
.xsc__nudge{margin:12px 0 16px;font-size:13.5px;color:#7a4a17;background:#fdf0e3;border-radius:4px;padding:8px 11px;min-height:36px}
.xsc__nudge:empty{visibility:hidden}
.xsc__cta{display:block;text-align:center;text-decoration:none;font-weight:700;font-size:15px;background:#0b3c46;color:#fff;padding:13px;border-radius:4px;transition:background .2s}
.xsc__cta:hover{background:#0e7c86}
@media(max-width:860px){.xsc__inner{grid-template-columns:minmax(0,1fr);padding:34px 18px;gap:24px}.xsc__card{padding:18px}.xsc__tier span{white-space:normal}.xsc__price{font-size:32px}}// Prijsschuif met pakketgrenzen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.xsc');if(!w)return;
var r=w.querySelector('.xsc__range'),hrs=w.querySelector('.xsc__hrs'),pr=w.querySelector('.xsc__price'),uur=w.querySelector('.xsc__uur'),nd=w.querySelector('.xsc__nudge'),tiers=w.querySelectorAll('.xsc__tier');
var T=[{min:2,rate:32,n:'Particulier'},{min:8,rate:28.5,n:'Kantoor'},{min:20,rate:25.75,n:'Vast team'}];
function eur(n,d){return '€ '+n.toLocaleString('nl-NL',{minimumFractionDigits:d,maximumFractionDigits:d});}
var shown=0;
function anim(to){var from=shown;shown=to;if(matchMedia('(prefers-reduced-motion: reduce)').matches){pr.textContent=eur(to,0);return;}var t0=null;function f(t){if(!t0)t0=t;var p=Math.min(1,(t-t0)/250);pr.textContent=eur(Math.round(from+(to-from)*p),0);if(p<1)requestAnimationFrame(f);}requestAnimationFrame(f);}
function calc(){
var h=+r.value,i=h>=20?2:h>=8?1:0,t=T[i];
hrs.textContent=h+' uur';
r.style.setProperty('--p',((h-2)/38*100)+'%');
tiers.forEach(function(x,k){x.classList.toggle('is-on',k===i);});
uur.textContent=eur(t.rate,2);
anim(Math.round(h*52/12*t.rate));
if(i<2){var nx=T[i+1],d=nx.min-h;nd.textContent='Nog '+d+' uur per week en uw tarief zakt naar '+eur(nx.rate,2)+' ('+nx.n+').';}else nd.textContent='U zit op het laagste tarief, inclusief vaste teamleider.';
}
r.addEventListener('input',calc);calc();
}
init(document.querySelector('.jouw-container'));More page sections
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →