• HTML
• CSS
• JS

HTML

<div class="range">
    <div class="sliderValue">
        <span>100</span>
    </div>
    <div class="field">
        <div class="value left">0</div>
        <input type="range" min="0" max="200" value="1">
        <div class="value right">200</div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}
html,body{
    display:grid;
    height:100%;
    text-align:center;
    place-items:center;
    background:#664AFF;
}
.range{
    height:80px;
    width:380px;
    background:#fff;
    border-radius:10px;
    padding:0 65px 0 45px;
}
.range .sliderValue{
    position:relative;
    width:100%;
}
.range .sliderValue span{
    position:absolute;
    height:45px;
    width:45px;
    background:y;
    color:#fff;
    font-weight:500;
    top:-40px;
    transform:translateX(-50%) scale(0);
    transition:transform 0.3s ease-in-out;
    line-height:55px;
    z-index:2;
}
.range .sliderValue span.show{
    transform:translateX(-50%) scale(1);
}
.range .sliderValue span:after{
    position:absolute;
    content:"";
    height:45px;
    width:45px;
    background:#664AFF;
    left:50%;
    transform:translateX(-50%) rotate(45deg);
    border:3px solid #fff;
    z-index:-1;
    border-top-left-radius:50%;
    border-top-right-radius:50%;
    border-bottom-left-radius:50%;
}
.range .field{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}
.range .field .value{
    position:absolute;
    font-size:18px;
    font-weight:600;
    color:#664AFF;
}
.range .field .value.left{
    left:-22px;
}
.range .field .value.right{
    right:-43px;
}
.range .field input{
    -webkit-appearance:none;
    height:3px;
    width:100%;
    background:#ddd;
    border-radius:5px;
    outline:none;
    border:none;
}
.range .field input::-webkit-slider-thumb{
    -webkit-appearance:none;
    height:20px;
    width:20px;
    background:#664AFF;
    border-radius:50%;
    border:1px solid #664AFF;
    cursor:pointer;
}
.range .field input::-moz-range-progress{
    background:#664AFF; /*this progress background color is only show on Mozila Firefox*/
}

/* 
    Todo los créditos para su autor
    Fuente: https://www.youtube.com/watch?v=3Eb6FtjkZ_k
*/

JS

const slideValue  = document.querySelector("span");
const inputSlider = document.querySelector("input");

inputSlider.oninput = (()=>{
   let value = inputSlider.value;
   slideValue.textContent = value;
   slideValue.style.left  = (value/2) + "%";
   slideValue.classList.add("show");
});

inputSlider.onblur = (()=>{
    slideValue.classList.remove("show");
});