CSS ::-moz-range-track Pseudo-Element

The ::-moz-range-track pseudo-element is a non-standard Mozilla CSS extension used to style the track of an HTML <input type="range"> slider in Firefox. It allows developers to customize the track's color, thickness, borders, and shape independently of the draggable thumb.

Syntax

input[type="range"]::-moz-range-track {
  background-color: #ddd;
}

The pseudo-element is appended to a selector targeting an HTML range input. CSS declarations inside the rule affect the slider track in Firefox.

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

How It Works

An HTML range input allows users to select a numeric value by moving a draggable thumb along a track.

The track provides the visual path along which the thumb moves. Firefox exposes this part of the control through the ::-moz-range-track pseudo-element.

Developers can change the track's appearance without modifying the slider's numeric range or current value.

The min, max, step, and value attributes determine how the slider operates. CSS controls its visual presentation.

Range Slider Components

Firefox provides three browser-specific pseudo-elements for styling the main visual parts of a range slider.

::-moz-range-track - Styles the track along which the thumb moves.
::-moz-range-progress - Styles the portion of the track between the minimum value and the current thumb position.
::-moz-range-thumb - Styles the draggable thumb used to select a value.

These pseudo-elements can be combined to create a slider with different colors for the track, filled portion, and thumb.

The track itself does not determine the selected value. It provides the visual background for the slider's movement.

Styling the Slider Track

Common CSS properties used with ::-moz-range-track include background-color, height, border, and border-radius.

input[type="range"]::-moz-range-track {
  background-color: #ddd;
  height: 8px;
  border: 1px solid #aaa;
  border-radius: 4px;
}

The background-color property sets the track color, while height controls its thickness.

The border property adds an outline around the track, and border-radius rounds its corners.

These styles affect the track's appearance but do not change the thumb's size or the range of selectable values.

Example

The following example creates a Firefox range slider with a gray track, blue filled portion, and circular blue thumb.

HTML:

<label for="font-size">Font size:</label>
<input type="range" id="font-size" min="12" max="36" value="20">

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: #0066cc;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

The slider starts at a value of 20 within a range from 12 to 36. The thumb is positioned approximately one-third of the way along the track.

In Firefox, the track appears gray, the selected portion appears blue, and the thumb uses a circular design.

Moving the thumb updates the input's value and changes the length of the filled section automatically.

Cross-Browser Styling

Firefox and Chromium-based browsers use different pseudo-elements to style the tracks of HTML range sliders.

Firefox uses ::-moz-range-track, while Chrome, Edge, and Safari support ::-webkit-slider-runnable-track.

The following example applies similar track styling using separate browser-specific rules.

input[type="range"] {
  width: 260px;
  appearance: none;
  background: transparent;
}
input[type="range"]::-moz-range-track {
  background-color: #ddd;
  height: 8px;
  border-radius: 4px;
}
input[type="range"]::-webkit-slider-runnable-track {
  background-color: #ddd;
  height: 8px;
  border-radius: 4px;
}

Separate rules are used because an unsupported vendor-specific pseudo-element can cause a combined selector list to be ignored.

Note: The appearance: none declaration removes native styling from the range input. A complete custom slider also requires appropriate thumb styling, and additional adjustments may be needed to align the thumb with the track.

For simpler color customization, the standardized accent-color property can be used while retaining the browser's native slider appearance.

Accessibility Considerations

Custom slider tracks should remain visually clear and easy to use with different input methods.

Maintain sufficient contrast between the track, filled portion, and thumb.
Use a visible label to identify the slider's purpose.
Keep the thumb large enough to operate comfortably.
Preserve keyboard interaction and a visible focus indicator.
Avoid making the track so thin that users have difficulty identifying the control.

The following CSS adds a visible focus outline when the slider receives keyboard focus.

input[type="range"]:focus-visible {
  outline: 3px solid #0066cc;
  outline-offset: 4px;
}

Using the native HTML range input preserves built-in keyboard interaction and accessibility semantics.

Browser Support

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

Other browser engines provide their own internal pseudo-elements for styling range controls. The HTML <input type="range"> element itself is widely supported.

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

Specifications

::-moz-range-track 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 .