range slider left right colour

HTML

<input type="range" min=0 max=1000 />

<input type="range" min=10 max=80 />

CSS

input[type='range'] {
            width: 100%;
            border-radius: 4px;
            height: 5px;
            border-color: #1f1f1f; 
            border-style: solid; 
            border-width: 1px;
        }
        
/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {    
    input[type='range'] {
            -webkit-appearance: none;
            background: -webkit-linear-gradient(left, red 0%, red 50%, grey 50%);
        }
}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: Rebecca Purple; 
}
input[type="range"]::-moz-range-track {  
  background-color: grey;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: red; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: grey;
}

JavaScript

var allRangeElements = document.querySelectorAll("input[type=range]");
//for each range element
for (i = 0; i < allRangeElements.length; ++i) {
  allRangeElements[i].addEventListener("input",function(){
  	 var percent = Math.ceil(((this.value - this.min) / (this.max - this.min)) * 100);
     console.log(percent);
     this.style.background="-webkit-linear-gradient(left, red 0%, red " + percent + "%, grey " + percent + "%)";
  })
};