html - input type range css - background color -

this question has answer here:

• how style html5 range input have different color before , after slider? 6 answers

i want customize <input type="range"> using css. result want achieve this:

but following code gives me this

this code:

input[type='range'] {     border-radius: 5px;     height: 6px;     vertical-align: middle;     -webkit-appearance: none; } input[type="range"]::-moz-focus-inner:focus{        border : 0px;     outline: 0; }  input[type='range']::-moz-range-track {     border-radius: 5px;     background-color: #e71d49;     height: 6px;     border: 1px dotted transparent !important; } input[type='range']::-webkit-slider-thumb {     border-radius: 20px;     background-color: #fff;     border:none;     box-shadow: 0 5px #000;     height: 5px;     width: 5px; } input[type='range']::-moz-range-thumb {     border-radius: 20px;     background-color: #fff;     border:none;     height: 20px;     box-shadow: 3px 2px 3px #000;     width: 20px; } 

is possible separate slider "active" , "inactive" one?

thanks in advance dario

hope example

code : example

var inputs = document.getelementsbytagname('input'); inputs = array.splice(inputs, 0); inputs.foreach(function (item) { if (item.type === 'range') {     item.onchange = function () {         value = (item.value - item.min)/(item.max - item.min)         item.style.backgroundimage = [             '-webkit-gradient(',               'linear, ',               'left top, ',               'right top, ',               'color-stop(' + value + ', blue), ',               'color-stop(' + value + ', red)',             ')'         ].join('');     }; } });