• HTML
• CSS

HTML

<div class="container">
    <input type="range" id="inputId" value="50" min="1" max="100" oninput="outputId.value = inputId.value">
    <output id="outputId">50</output>
</div>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#030e08;
    font-family:sans-serif;
}
.container{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.container input{
    background: #6ae3a9;
    background: linear-gradient(to right, #6ae3a9 3%, #14ae59 58%);
    height:23px;
    outline:none;
    -webkit-appearance:none;
    cursor: ew-resize;
    border-radius: 5px;
    border: 3px solid white;
    accent-color: white;
}
.container output{
    color:white;
    font-weight:bold;
    font-size:16px;
    margin-top:15px;
}