JSFiddle - React, Tailwind, and code Playground

HTML

<body style="background-color: #000000">
        <form oninput="amount.value=range.value" style="color:#1ec2c5;">
            <output name="amount" for="range">2</output><a> KM</a>
       <input type="range" name="range" min="1" max="9" step="1" value="2" id="test">
</body>

CSS

input[type="range"]{
    -webkit-appearance: none;
    -moz-apperance: none;
    border-radius: 6px;
    width: 225px;
    height: 6px;
    border: 2px solid #eceef1;
    outline:none;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.15, #eceef1),
        color-stop(0.15, #0c0d17)
    );
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background-color: #1ec2c5;
    border: 3px solid #000000;
    height: 25px;
    width: 25px;
    border-radius: 20px;
}

JavaScript

$('input[type="range"]').change(function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));
    
    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #eceef1), '
                + 'color-stop(' + val + ', #0c0d17)'
                + ')'
                ); 
});