JSFiddle - React, Tailwind, and code Playground

by bruscopelliti

HTML

<input type="range" min="0" max="100" value="20" />
<input class="top" type="range" min="0" max="100" value="80" />

CSS

input[type=range] {
    background-color: transparent;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
}
input.top {
    -webkit-appearance: none;
}
input::-webkit-slider-thumb {
    pointer-events: auto;
}