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
How to Use HTML to Print Header and Footer on Every Printed Page of a Document
Vuetify: Fit V-Image Within the Screen Size
How to Get Div Height to Auto-Adjust to Background Size
Css Selector For First Element With Class
What Does !Important Mean in Css
Css @Font-Face Not Working With Firefox, But Working With Chrome and Ie
Center an Element in Bootstrap Navbar
Setting Element Width Based on Height Via Css
Stretch Child Div Height to Fill Parent That Has Dynamic Height
How to Avoid Extra Blank Page At End While Printing
How to Style Html5 Range Input to Have Different Color Before and After Slider
How to Make Bootstrap Columns All the Same Height
Why Does Applying a Css-Filter on the Parent Break the Child Positioning
How to Override Inline Styles With External Css
Difference Between Max-Device-Width and Max-Width For Mobile Web