JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

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

CSS

fieldset {
    position: relative;
    padding: 20px;
}

input {
    background: #aeaeae;
    border-radius: 12px;
    width:100%;
    height:12px;

    -webkit-appearance:none;
    width:100%;
}

input::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px;
    height:18px;
    -webkit-border-radius:18px;
    background: green;
}

input::-webkit-slider-runnable-track {
    
}