Range Slider

<!-- Range Slider · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rng-wrap"><div class="rng-bubble">50</div><input class="rng-input" type="range" min="0" max="100" value="50"><div class="rng-track"><span class="rng-fill"></span></div></div>
</div>

/* Range Slider · NedDev · eigen werk. */
.rng-wrap{position:relative;width:300px;padding-top:34px;font-family:'Switzer',sans-serif}
.rng-track{position:relative;height:6px;border-radius:4px;background:rgba(10,10,10,.12);pointer-events:none}
.rng-fill{position:absolute;left:0;top:0;height:100%;width:50%;border-radius:4px;background:#F5480F}
.rng-input{position:absolute;left:0;right:0;bottom:0;width:100%;height:6px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.rng-input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #F5480F;box-shadow:0 2px 6px rgba(10,10,10,.2);transition:transform .12s}
.rng-input:active::-webkit-slider-thumb{transform:scale(1.2)}
.rng-input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #F5480F;cursor:pointer}
.rng-bubble{position:absolute;top:0;left:50%;transform:translateX(-50%);background:#0a0a0a;color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px}
.rng-bubble::after{content:'';position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);border:4px solid transparent;border-top-color:#0a0a0a}

// Range Slider · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.rng-wrap')||root;var inp=root.querySelector('.rng-input'),fill=root.querySelector('.rng-fill'),bub=root.querySelector('.rng-bubble');function upd(){var p=(inp.value-inp.min)/(inp.max-inp.min);fill.style.width=(p*100)+'%';bub.textContent=inp.value;bub.style.left='calc('+(p*100)+'% + '+((0.5-p)*20)+'px)';}inp.addEventListener('input',upd);upd();
}
init(document.querySelector('.jouw-container'));