• HTML
• CSS
• JS

HTML

<div>
    <span id="rangeValue">0</span>
    <input class="range" type="range" name="" value="0" min="0" max="1000" onChange="rangeSlide(this.value)" onmousemove="rangeSlide(this.value)">
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
*{
    margin:0;
    padding:0;
    font-family:'Poppins',sans-serif;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#151515;
}
div
{
    position:relative;
}
#rangeValue
{
    position:relative;
    display:block;
    text-align:center;
    font-size:6em;
    color:#999;
    font-weight:400;
}
.range{
    width:400px;
    height:15px;
    -webkit-appearance:none;
    background:#111;
    outline:none;
    border-radius:15px;
    overflow:hidden;
    box-shadow:inset 0 0 5px rgba(0,0,0,1);
}
.range::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:15px;
    height:15px;
    border-radius:50%;
    background:#00fd0a;
    cursor:pointer;
    border:4px solid #333;
    box-shadow:-407px 0 0 400px #00fd0a;
}

JS

function rangeSlide(value){
    document.getElementById('rangeValue').innerHTML = value;
}

/*
    Todo los créditos a su autor:
    https://www.youtube.com/watch?v=mvq8uOGFqlc
*/