JSFiddle - React, Tailwind, and code Playground

by wesbos

HTML

<input type="range" min="0" max="100" value="50" onchange="this.setAttribute('value', this.value);">

CSS

input[type=range] {
    position: relative;
    -webkit-appearance: none;
    background-color: silver;
    width: 200px;
    height:10px;
    margin:50px;
    border:1px solid #d5d5d5;
    background: #eeeeee;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius:50%;
    background:#336799;
    position: relative;
    z-index: 2;
}
input[type=range]:focus {
    outline:0;
}
input[type=range]:before {
    content :'';
    display:block;
    background:red;
    position:absolute;
    height:10px;
    left:0;
}
input[type=range][value="0"]:before {
    width:0%;
}
input[type=range][value="1"]:before {
    width:1%;
}
input[type=range][value="2"]:before {
    width:2%;
}
input[type=range][value="3"]:before {
    width:3%;
}
input[type=range][value="4"]:before {
    width:4%;
}
input[type=range][value="5"]:before {
    width:5%;
}
input[type=range][value="6"]:before {
    width:6%;
}
input[type=range][value="7"]:before {
    width:7%;
}
input[type=range][value="8"]:before {
    width:8%;
}
input[type=range][value="9"]:before {
    width:9%;
}
input[type=range][value="10"]:before {
    width:10%;
}
input[type=range][value="11"]:before {
    width:11%;
}
input[type=range][value="12"]:before {
    width:12%;
}
input[type=range][value="13"]:before {
    width:13%;
}
input[type=range][value="14"]:before {
    width:14%;
}
input[type=range][value="15"]:before {
    width:15%;
}
input[type=range][value="16"]:before {
    width:16%;
}
input[type=range][value="17"]:before {
    width:17%;
}
input[type=range][value="18"]:before {
    width:18%;
}
input[type=range][value="19"]:before {
    width:19%;
}
input[type=range][value="20"]:before {
    width:20%;
}
input[type=range][value="21"]:before {
    width:21%;
}
input[type=range][value="22"]:before {
    width:22%;
}
input[type=range][value="23"]:before {
    width:23%;
}
input[type=range][value="24"]:before {
   ...