Range Slider with Tooltip

<div class="rt"><output class="rt-bubble" id="bubble">50</output><input type="range" id="range" min="0" max="100" value="50"></div>

body{background:#f6f7fa}
.rt{position:relative;width:300px;padding-top:42px}
.rt input{width:100%;-webkit-appearance:none;height:7px;border-radius:999px;background:#e2e6ef;outline:none}
.rt input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#ff7a18,#ff477e);cursor:pointer;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.rt-bubble{position:absolute;top:0;transform:translateX(-50%);background:#1a1f36;color:#fff;font:700 13px/1 system-ui,sans-serif;padding:6px 10px;border-radius:8px}
.rt-bubble::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1a1f36}

var r=document.getElementById('range'),bub=document.getElementById('bubble');
function upd(){var v=+r.value;bub.textContent=v;var pct=v/(r.max-r.min);bub.style.left='calc('+v+'% + '+(12-pct*24)+'px)'}
r.oninput=upd;upd();