How to customize the HTML5 input range type looks using CSS?

Question

I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I\'ve tried applying some common CSS attributes using CSS class but it

Answer 1

input[type='range'] {
    -webkit-appearance: none !important;
    background:red;
    height:7px;
}
input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background:blue;
    height:10px;
    width:10px;
}