Of bel direct:
070 301 66 12<\/b><\/div>\n\u2013><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
(function(){
\nvar sliders = [
\n{id:\u2019v\u2019, min:50000, max:2000000, step:50000, val:500000},
\n{id:\u2019d\u2019, min:30, max:100, step:5, val:70},
\n{id:\u2019t\u2019, min:5, max:20, step:0.5, val:9}
\n];<\/p>\n
function fmt(n){return\u2019\\u20AC\\u00a0\u2019+Math.round(n).toLocaleString(\u2018nl-NL\u2019)}
\nfunction fkwh(v){return v.toLocaleString(\u2018nl-NL\u2019)+\u2019\\u00a0kWh\u2019}<\/p>\n
function calc(){
\nvar v=sliders[0].val, d=sliders[1].val, t=sliders[2].val;
\ndocument.getElementById(\u2018v-out\u2019).textContent=fkwh(v);
\ndocument.getElementById(\u2018d-out\u2019).textContent=d+\u2019%\u2019;
\ndocument.getElementById(\u2019t-out\u2019).textContent=t.toLocaleString(\u2018nl-NL\u2019,{minimumFractionDigits:1,maximumFractionDigits:1})+\u2019\\u00a0ct\/kWh\u2019;
\nvar tar=t\/100,dag=v*(d\/100),nacht=v-dag,huidig=v*tar;
\nvar bMin=huidig-(dag*tar*0.85+nacht*tar);
\nvar bMax=huidig-(dag*tar*0.75+nacht*tar);
\ndocument.getElementById(\u2018r-min\u2019).textContent=fmt(bMin);
\ndocument.getElementById(\u2018r-max\u2019).textContent=fmt(bMax);
\ndocument.getElementById(\u2018r-sub\u2019).textContent=\u2019\\u2248\\u00a0\u2019+fmt(bMin\/12)+\u2019\\u00a0\\u2013\\u00a0\u2019+fmt(bMax\/12)+\u2019\\u00a0per maand\u2019;
\n}<\/p>\n
function initSlider(s){
\nvar wrap = document.getElementById(\u2018cs-\u2018+s.id);
\nvar fill = document.getElementById(\u2018cf-\u2018+s.id);
\nvar thumb = document.getElementById(\u2018ct-\u2018+s.id);
\nif(!wrap) return;<\/p>\n
function render(clientX){
\nvar r = wrap.getBoundingClientRect();
\nvar pct = Math.max(0, Math.min(1, (clientX \u2013 r.left) \/ r.width));
\nvar raw = s.min + pct*(s.max-s.min);
\ns.val = Math.max(s.min, Math.min(s.max, Math.round(raw\/s.step)*s.step));
\nvar p = (s.val-s.min)\/(s.max-s.min)*100;
\nthumb.style.left = p+\u2019%\u2019;
\nfill.style.width = p+\u2019%\u2019;
\ncalc();
\n}<\/p>\n
\/\/ Init
\nvar initPct = (s.val-s.min)\/(s.max-s.min)*100;
\nthumb.style.left = initPct+\u2019%\u2019;
\nfill.style.width = initPct+\u2019%\u2019;<\/p>\n
\/\/ Mouse
\nwrap.addEventListener(\u2018mousedown\u2019, function(e){
\ne.preventDefault();
\nrender(e.clientX);
\nfunction mm(e){render(e.clientX);}
\nfunction mu(){document.removeEventListener(\u2018mousemove\u2019,mm);document.removeEventListener(\u2018mouseup\u2019,mu);}
\ndocument.addEventListener(\u2018mousemove\u2019,mm);
\ndocument.addEventListener(\u2018mouseup\u2019,mu);
\n});<\/p>\n
\/\/ Touch \u2013 gebruik capture phase en stopImmediatePropagation
\nwrap.addEventListener(\u2019touchstart\u2019, function(e){
\ne.preventDefault();
\ne.stopImmediatePropagation();
\nrender(e.touches[0].clientX);
\n},{passive:false,capture:true});<\/p>\n
wrap.addEventListener(\u2019touchmove\u2019, function(e){
\ne.preventDefault();
\ne.stopImmediatePropagation();
\nrender(e.touches[0].clientX);
\n},{passive:false,capture:true});<\/p>\n
wrap.addEventListener(\u2019touchend\u2019, function(e){
\ne.stopImmediatePropagation();
\n},{passive:false,capture:true});
\n}<\/p>\n
function init(){
\nsliders.forEach(initSlider);
\ncalc();<\/p>\n
\/\/ GA4
\nvar labels={v:\u2019jaarverbruik\u2019,d:\u2019dagverbruik\u2019,t:\u2019markttarief\u2019};
\nvar timers={};
\nsliders.forEach(function(s){
\nvar wrap=document.getElementById(\u2018cs-\u2018+s.id);
\nif(!wrap) return;
\nwrap.addEventListener(\u2019touchend\u2019,function(){
\nclearTimeout(timers[s.id]);
\ntimers[s.id]=setTimeout(function(){
\nif(typeof gtag!==\u2019undefined\u2019) gtag(\u2018event\u2019,\u2019slider_adjust\u2019,{event_category:\u2019SlimDal Calculator\u2019,event_label:labels[s.id],value:s.val,page_location:window.location.href});
\n},500);
\n});
\nwrap.addEventListener(\u2018mouseup\u2019,function(){
\nclearTimeout(timers[s.id]);
\ntimers[s.id]=setTimeout(function(){
\nif(typeof gtag!==\u2019undefined\u2019) gtag(\u2018event\u2019,\u2019slider_adjust\u2019,{event_category:\u2019SlimDal Calculator\u2019,event_label:labels[s.id],value:s.val,page_location:window.location.href});
\n},500);
\n});
\n});
\n}<\/p>\n
if(document.readyState===\u2019loading\u2019){
\ndocument.addEventListener(\u2018DOMContentLoaded\u2019,init);
\n} else {
\ninit();
\n}
\n})();<\/div><\/div><\/div><\/div>
\n*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
\n.sd-widget{background:transparent;display:inline-block;width:100%;}<\/p>\n
.sd-widget .card{
\nbackground:#fff;
\nborder-radius:24px;
\npadding:42px 36px 42px;
\nwidth:100%;max-width:820px;
\nbox-shadow:0 20px 60px rgba(0,0,0,.12);
\n}
\n.sd-widget .card-inner{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;}
\n.sd-widget .card{container-type:inline-size;container-name:sdcard;}
\n@container sdcard (max-width:560px){
\n.sd-widget .card-inner{grid-template-columns:1fr;}
\n.sd-widget .card-title{font-size:22px;}
\n}
\n@media(max-width:700px){
\n.sd-widget .card-inner{grid-template-columns:1fr;}
\n.sd-widget .card-title{font-size:22px;}
\n.sd-widget .card{padding:24px 20px;}
\n}<\/p>\n
\/* HEADLINE *\/
\n.sd-widget .card-title{
\nfont-family:\u2019Nunito\u2019,sans-serif;
\nfont-weight:800;font-size:38px;
\ncolor:#1a1a1a;line-height:1.2;
\nmargin-bottom:32px;
\n}
\n.sd-widget .card-title em{font-style:normal;color:#4bc5f2}<\/p>\n
\/* SLIDERS *\/
\n.sd-widget .sd-field{margin-bottom:16px}
\n.sd-widget .sd-field-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
\n.sd-widget .sd-field-lbl{font-size:13px;color:#666;font-weight:400}
\n.sd-widget .sd-field-hint{font-size:10px;color:#bbb;display:block;margin-top:1px}
\n.sd-widget .sd-field-val{font-family:\u2019Nunito\u2019,sans-serif;font-weight:700;font-size:14px;color:#1a1a1a;white-space:nowrap;margin-left:8px}<\/p>\n
.sd-widget input[type=range]{
\n-webkit-appearance:none;appearance:none;
\nwidth:100%;height:6px;border-radius:3px;
\nbackground:#e8e8e8;outline:none;cursor:pointer;
\ntouch-action:pan-y;margin:6px 0;
\n}
\n.sd-widget input[type=range]::-webkit-slider-thumb{
\n-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
\nbackground:#4bc5f2;border:3px solid #fff;
\nbox-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;
\n}
\n.sd-widget input[type=range]::-moz-range-thumb{
\nwidth:28px;height:28px;border-radius:50%;
\nbackground:#4bc5f2;border:3px solid #fff;cursor:pointer;
\nbox-shadow:0 2px 8px rgba(0,0,0,.25);
\n}
\n.sd-widget .sd-lims{display:flex;justify-content:space-between;font-size:10px;color:#ccc;margin-top:4px}<\/p>\n
.sd-widget .divider{height:1px;background:#f0f0f0;margin:20px 0}<\/p>\n
\/* BESPARING GROOT *\/
\n.sd-widget .besparing-lbl{
\nfont-size:11px;font-weight:700;text-transform:uppercase;
\nletter-spacing:.1em;color:#1fa85e;margin-bottom:6px;
\n}
\n.sd-widget .besparing-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;flex-wrap:nowrap;}
\n.sd-widget .besparing-min{
\nfont-family:\u2019Nunito\u2019,sans-serif;font-weight:700;
\nfont-size:28px;color:#1fa85e;opacity:.5;white-space:nowrap;
\n}
\n.sd-widget .besparing-sep{font-size:18px;color:#1fa85e;opacity:.3}
\n.sd-widget .besparing-max{
\nfont-family:\u2019Nunito\u2019,sans-serif;font-weight:900;
\nfont-size:42px;color:#1fa85e;line-height:1;white-space:nowrap;
\n}
\n.sd-widget .besparing-unit{font-size:13px;color:#1fa85e;opacity:.7;margin-bottom:2px}
\n.sd-widget .besparing-sub{font-size:12px;color:#aaa;line-height:1.5;margin-bottom:0}<\/p>\n