How to Style Html5 Range Input to Have Different Color Before and After Slider

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

Pure CSS solution:

  • Chrome: Hide the overflow from input[range], and fill all the space left to
    thumb with shadow color.
  • IE: no need to reinvent the wheel: ::-ms-fill-lower
  • Firefox no need to reinvent the wheel: ::-moz-range-progress

/*Chrome*/@media screen and (-webkit-min-device-pixel-ratio:0) {    input[type='range'] {      overflow: hidden;      width: 80px;      -webkit-appearance: none;      background-color: #9a905d;    }        input[type='range']::-webkit-slider-runnable-track {      height: 10px;      -webkit-appearance: none;      color: #13bba4;      margin-top: -1px;    }        input[type='range']::-webkit-slider-thumb {      width: 10px;      -webkit-appearance: none;      height: 10px;      cursor: ew-resize;      background: #434343;      box-shadow: -80px 0 0 80px #43e5f7;    }
}/** FF*/input[type="range"]::-moz-range-progress { background-color: #43e5f7; }input[type="range"]::-moz-range-track { background-color: #9a905d;}/* IE*/input[type="range"]::-ms-fill-lower { background-color: #43e5f7; }input[type="range"]::-ms-fill-upper { background-color: #9a905d;}
<input type="range"/>

Range input runner progress fill color

What you can do is to use a CSS linear-gradient() for the background of your range element. The gradient will look like this:

linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)

Where percentage is the abrupt transition point from your color green to transparent. To calculate this percentage, some math is required: you will want to calculate the relative value of the input element to its minimum and maximum values. This can be computed as such:

const percentage = (e.target.value - slider.min) / (slider.max - slider.min) * 100;

See proof-of-concept below:

var slider = document.getElementById("myRange");var output = document.getElementById("demo");output.innerHTML = slider.value;
function updateGradient(rangeValue) { const percentage = (rangeValue - slider.min) / (slider.max - slider.min) * 100; slider.style.backgroundImage = `linear-gradient(90deg, #4CAF50 ${percentage}%, transparent ${percentage}%)`;}
// Update gradient onloadupdateGradient(slider.value);
// Update gradient oninputslider.addEventListener('input', (e) => { output.innerHTML = e.target.value; updateGradient(e.target.value);});
.slider {  -webkit-appearance: none;  width: 100%;  height: 15px;  border-radius: 5px;  background: #d3d3d3;  outline: none;  opacity: 0.7;  -webkit-transition: .2s;  transition: opacity .2s;}
.slider:hover { opacity: 1;}
.slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}
.slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="slidecontainer">  <input type="range" min="1" max="5" value="50" class="slider" id="myRange">  <p>Value: <span id="demo"></span></p></div>


Related Topics



Leave a reply



Submit