JSFiddle - React, Tailwind, and code Playground

HTML

<form class="rangeslider">
    <fieldset>
        <input type="range" value="0" />
    </fieldset>
</form>

CSS

.rangeslider{background-color:red; width:80%; margin:1em auto; height:60px}
fieldset{margin:0 auto; width:80%; padding:20px 0}
input[type="range"]{-webkit-appearance:none; -moz-apperance:none; width:100%; height:4px;}
.rangeslider input::-webkit-slider-thumb{-webkit-appearance:none; -moz-apperance:none; width:10px; height:10px;
-webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #dddddd), color-stop(0.51, #d1d1d1), color-stop(1, #a1a1a1) );
}