JSFiddle - React, Tailwind, and code Playground
HTML
<input type="range">
CSS
body {
padding: 30px;
}
input[type=range] {
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 2px solid transparent;
width: 100%;
cursor: pointer;
overflow-x: hidden;
overflow-y: visible;
position: relative;
height: 20px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 20px;
width: 20px;
border-radius: 50%;
border: 2px solid #fff;
background: blue;
margin-top: -7px;
position: relative;
}
input[type=range]::-webkit-slider-thumb:before {
position: absolute;
top: 5px;
left: -2000px;
width: 2000px;
height: 6px;
margin-left: -2px;
background: #666;
content: ' ';
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
border: 2px solid #fff;
background: blue;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid #fff;
outline-offset: -1px;
}
input[type=range]::-ms-track {
width: 100%;
height: 5px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #666;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper...