CSS ::-moz-range-progress Pseudo-Element

The ::-moz-range-progress pseudo-element is a non-standard Mozilla CSS extension used to style the filled portion of an HTML <input type="range"> slider in Firefox. It allows developers to customize the section of the slider track between the minimum value and the current thumb position.

Syntax

input[type="range"]::-moz-range-progress {
  background-color: #0066cc;
}

The pseudo-element is appended to a selector targeting an HTML range input. The declarations affect the portion of the track representing the selected range in Firefox.

The -moz- prefix identifies this as a Mozilla-specific pseudo-element rather than a standardized CSS feature.

How It Works

An HTML range input lets users select a numeric value by moving a slider thumb along a track.

In Firefox, the track can be divided visually into two sections: the portion before the thumb and the remaining portion after it.

The ::-moz-range-progress pseudo-element targets the section between the minimum value and the current thumb position. As the user moves the thumb, the length of this section changes automatically.

Styling the pseudo-element changes the visual appearance of the filled section. It does not modify the slider's minimum, maximum, step, or current value.

Range Slider Components

Firefox provides several browser-specific pseudo-elements for styling different parts of a range slider.

::-moz-range-track - Styles the slider track.
::-moz-range-progress - Styles the filled portion of the track between the minimum value and the thumb.
::-moz-range-thumb - Styles the draggable slider thumb.

These selectors allow the track, filled section, and thumb to use different colors and dimensions.

Other browsers expose different internal slider components, so these Mozilla-specific selectors should not be used as the only styling method when consistent cross-browser appearance is required.

Styling the Progress Track

The following CSS changes the filled portion of the slider to blue and adds rounded corners.

input[type="range"]::-moz-range-progress {
  background-color: #0066cc;
  height: 8px;
  border-radius: 4px;
}

The background-color property sets the color of the filled section. The height property controls its thickness, while border-radius rounds its ends.

The remaining track and thumb retain their browser-defined appearance unless they are styled separately.

Example

The following example creates a volume slider with a blue progress track, a gray remaining track, and a circular thumb in Firefox.

HTML:

<label for="volume">Volume:</label>
<input type="range" id="volume" min="0" max="100" value="60">

CSS:

input[type="range"] {
  width: 260px;
}
input[type="range"]::-moz-range-track {
  background-color: #ddd;
  height: 8px;
  border-radius: 4px;
}
input[type="range"]::-moz-range-progress {
  background-color: #0066cc;
  height: 8px;
  border-radius: 4px;
}
input[type="range"]::-moz-range-thumb {
  background-color: #fff;
  border: 2px solid #0066cc;
  border-radius: 50%;
  width: 18px;
  height: 18px;
}

The slider starts at a value of 60 out of 100, so the filled section extends approximately 60 percent of the way along the track.

Moving the thumb updates the filled section automatically. The example uses Firefox-specific pseudo-elements, so its appearance may differ in other browsers.

Browser Support

::-moz-range-progress is a non-standard Mozilla-specific pseudo-element supported by Firefox. It is not supported by Chrome, Edge, or Safari.

The HTML <input type="range"> control is widely supported, but styling its internal components is browser-dependent.

For current compatibility information, visit Can I Use? and search for HTML range input styling.

Specifications

::-moz-range-progress is a proprietary Mozilla extension and is not defined in a standard CSS specification.

The HTML range input control is defined in the WHATWG HTML Living Standard .