Have you ever wondered if it's possible to create a progress bar using an input range? Imagine someone entering a number and the bar moves to the right, changing its background color on the left side of the thumb based on the size of the number. Check out this live demo to see it in action: http://jsfiddle.net/xnehel/ur26k9cx/2/
input[type=number]{
font-size: 20px;
padding: 5px;
}
input[type=range]{
margin-left: -200px;
position: absolute;
top:7px;
}
input[type=range]{
-webkit-appearance: none;
width: 170px;
}
input[type=range]::-webkit-slider-runnable-track {
height: 35px;
background: #ddd;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
border: 0;
width: 16px;
background: goldenrod;
}
input[type=range]:focus
{
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
I finally found the perfect solution for my problem, check it out here: LIVE DEMO