Rebecca Rebecca - 7 months ago 136
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

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
aren't legal operations on Firefox, while Google Chrome supports

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>


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;