Rebecca Rebecca - 4 months ago 106
HTML Question

How to fill HTML5 input[type=range] on the left side of the thumb with CSS only?

Is there a possibility to get the same effect as

::-ms-fill-lower
on Firefox? Without using JS?

I've already found a workaround in order to achieve that effect on webkit based browsers (e.g. Google Chrome) which uses the pseudo elements :before and :after. But it won't work on the Firefox elements. It seems like
::-moz-range-thumb::before
and
::-moz-range-thumb::after
aren't legal operations on Firefox, while Google Chrome supports
::-webkit-slider-thumb::before
and
::-webkit-slider-thumb::after


Here's a fiddle of the basic outline for the Firefox version:



input[type="range"].slider-track {
border: none;
margin: 10px 0;
width: 100%;
height: 30px;
padding: 0;
overflow-x: hidden;
overflow-y: visible;
background: transparent;
}

input[type="range"].slider-track::-moz-range-thumb {
box-shadow: none;
border: 2px solid grey;
height: 16px;
width: 16px;
border-radius: 16px;
background: white;
}

input[type="range"].slider-track::-moz-range-track {
width: 100%;
height: 2px;
box-shadow: none;
background: blue;
border-radius: 0px;
border: 0px;
}

<div style="max-width: 380px;">
<input type="range" class="slider-track" id="mySlider1"></input>
</div>




Answer

Sorry! I've found the answer 20 minutes after posting this... I was searching for that all day long... Here's the answer:

Use the ::-moz-range-progress element!

Example (works for the snippet)

input[type="range"].slider-track::-moz-range-progress {
      background: red;
}
Comments