Firefox progress bar style

Question

I have a problem with HTML video player progress bar style in Firefox. Safari and Chrome are okay, but Firefox is completely different. There should be no "bubble" and only the progress bar border is with the right colour. Anyone have idea how to get rid of the bubble and fill the bars background?

Firefox:

Chrome:

Safari:

HTML:

<div id="progress">
            <input type="range" id="seek-bar" min="0" max="100"  value="0" class="range" />
</div>

CSS:

.range {
  -webkit-appearance: none;
  background: linear-gradient(to right,
    #444 0, #444 100%);
  cursor: pointer;
  height: 3px;
  margin: 0;
  transitionx: 0.1s ease-in;
  vertical-align: bottom;
  width: 100%;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
}


#video-controls:hover .range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
}

JS:

      // Update the seek bar as the video plays
        video.addEventListener("timeupdate", function () {
      // Calculate the slider value
        var value = (100 / video.duration) * video.currentTime;
      // Update the slider value
        seekBar.value = value;
        updateText(video.currentTime);
        $current.text((new Date(null, null, null, null, null, video.currentTime).toTimeString().match(/\d{2}:\d{2}:\d{2}/)[0]).substr(3)); //Update current time MM:ss
        var $seekBar = $("#seek-bar");
        var val = $seekBar.val(); // Current video position
        var buf = (video.buffered.end(0) / video.duration) * 100; // Calculates buffered %
        $seekBar.css('background', 'linear-gradient(to right, #ff9900 0%, #ff9900 ' + val + '%, #777 ' + val + '%, #777 ' + buf + '%, #444 ' + buf + '%, #444 100%)');
    });

Possible duplicate of [How to customize the HTML5 input range type looks using CSS?](http://stackoverflow.com/questions/3556157/how-to-customize-the-html5-input-range-type-looks-using-css) or http://stackoverflow.com/q/22819334/215552 — Heretic Monkey, Feb 20 '17 at 18:12

score 5 · Accepted Answer · edited Feb 20 '17 at 18:56

Here are some styles for Firefox range input psuedo-elements, which should let you change the defaults for the thumb(bubble) and the track:

.range{
    padding:0;
    background: linear-gradient(to right, #444 0, #444 100%);
}
.range::-moz-range-track {
    background: linear-gradient(to right, #444 0, #444 100%);
    border: none;
}
.range::-moz-range-thumb {
    background: rgba(0,0,0,0); /*hide the 'bubble'*/
}

.range::-moz-focusring{ /*hide the outline behind the border*/
    outline: none;
}

Firefox progress bar style

1 Answers1