Sometimes, we want to style HTML5 range input to have a different color before and after slider with CSS and JavaScript.
In this article, we’ll look at how to style HTML5 range input to have a different color before and after slider with CSS and JavaScript.
How to style HTML5 range input to have a different color before and after slider with CSS and JavaScript?
To style HTML5 range input to have a different color before and after slider with CSS and JavaScript, we style the background with JavaScript.
For instance, we write
<div class="chrome">
<input id="myinput" min="0" max="60" type="range" value="30" />
</div>
to add an input.
Then we write
#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;
}
to add some styling to the input.
We then change the background color dynamically when the input value changes by writing
document.getElementById("myinput").oninput = function () {
const 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%)";
};
We listen to the input event by setting oninput
to a function that gets the value
and the put it in the linear gradient value when we change this.input.value
.
this
is the range input.
Conclusion
To style HTML5 range input to have a different color before and after slider with CSS and JavaScript, we style the background with JavaScript.