How to style HTML5 range input to have different color before and after slider?

// .chrome styling Vanilla JS


document.getElementById("myinput").oninput = function() {
var value = (this.value-this.min)/(this.max-this.min)*100
this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};

#myinput {
background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
border: solid 1px #82CFD0;
border-radius: 8px;
height: 7px;
width: 356px;
outline: none;
transition: background 450ms ease-in;
-webkit-appearance: none;
}

<div class="chrome">
<input id="myinput" min="0" max="60" type="range" value="30" />
</div>

/**
* Sniffs for Older Edge or IE,
* more info here:
* https://stackoverflow.com/q/31721250/3528132
*/
function isOlderEdgeOrIE() {
return (
window.navigator.userAgent.indexOf("MSIE ") > -1 ||
!!navigator.userAgent.match(/Trident.*rv\:11\./) ||
window.navigator.userAgent.indexOf("Edge") > -1
);
}


function valueTotalRatio(value, min, max) {
return ((value - min) / (max - min)).toFixed(2);
}


function getLinearGradientCSS(ratio, leftColor, rightColor) {
return [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + ratio + ', ' + leftColor + '), ',
'color-stop(' + ratio + ', ' + rightColor + ')',
')'
].join('');
}


function updateRangeEl(rangeEl) {
var ratio = valueTotalRatio(rangeEl.value, rangeEl.min, rangeEl.max);


rangeEl.style.backgroundImage = getLinearGradientCSS(ratio, '#919e4b', '#c5c5c5');
}


function initRangeEl() {
var rangeEl = document.querySelector('input[type=range]');
var textEl = document.querySelector('input[type=text]');


/**
* IE/Older Edge FIX
* On IE/Older Edge the height of the <input type="range" />
* is the whole element as oposed to Chrome/Moz
* where the height is applied to the track.
*
*/
if (isOlderEdgeOrIE()) {
rangeEl.style.height = "20px";
// IE 11/10 fires change instead of input
// https://stackoverflow.com/a/50887531/3528132
rangeEl.addEventListener("change", function(e) {
textEl.value = e.target.value;
});
rangeEl.addEventListener("input", function(e) {
textEl.value = e.target.value;
});
} else {
updateRangeEl(rangeEl);
rangeEl.addEventListener("input", function(e) {
updateRangeEl(e.target);
textEl.value = e.target.value;
});
}
}


initRangeEl();

input[type="range"] {
-webkit-appearance: none;
-moz-appearance: none;
width: 300px;
height: 5px;
padding: 0;
border-radius: 2px;
outline: none;
cursor: pointer;
}




/*Chrome thumb*/


input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 5px;
/*16x16px adjusted to be same as 14x14px on moz*/
height: 16px;
width: 16px;
border-radius: 5px;
background: #e7e7e7;
border: 1px solid #c5c5c5;
}




/*Mozilla thumb*/


input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
-moz-appearance: none;
-moz-border-radius: 5px;
height: 14px;
width: 14px;
border-radius: 5px;
background: #e7e7e7;
border: 1px solid #c5c5c5;
}




/*IE & Edge input*/


input[type=range]::-ms-track {
width: 300px;
height: 6px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 2px 0;
/*remove default tick marks*/
color: transparent;
}




/*IE & Edge thumb*/


input[type=range]::-ms-thumb {
height: 14px;
width: 14px;
border-radius: 5px;
background: #e7e7e7;
border: 1px solid #c5c5c5;
}




/*IE & Edge left side*/


input[type=range]::-ms-fill-lower {
background: #919e4b;
border-radius: 2px;
}




/*IE & Edge right side*/


input[type=range]::-ms-fill-upper {
background: #c5c5c5;
border-radius: 2px;
}




/*IE disable tooltip*/


input[type=range]::-ms-tooltip {
display: none;
}


input[type="text"] {
border: none;
}

<input type="range" value="80" min="10" max="100" step="1" />
<input type="text" value="80" size="3" />

const slider = document.getElementById("myinput")
const min = slider.min
const max = slider.max
const value = slider.value


slider.style.background = `linear-gradient(to right, red 0%, red ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%)`


slider.oninput = function() {
this.style.background = `linear-gradient(to right, red 0%, red ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)`
};

#myinput {
border-radius: 8px;
height: 4px;
width: 150px;
outline: none;
-webkit-appearance: none;
}


input[type='range']::-webkit-slider-thumb {
width: 6px;
-webkit-appearance: none;
height: 12px;
background: black;
border-radius: 2px;
}

<div class="chrome">
<input id="myinput" type="range" min="0" value="25" max="200" />
</div>

input[type="range"] {
filter: hue-rotate(180deg); //rotate degrees to get desired color
}

<input type="range" min="0" max="5" step="1" list="data" value="1" />
<datalist id="data">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</datalist>

 <input style="accent-color: #2ecc71" type="range"/>