CSS ::-moz-range-thumb Pseudo-Element

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

Syntax

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

The pseudo-element is appended to a selector targeting an HTML range input. CSS declarations inside the rule affect the slider's draggable thumb 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 lets users select a numeric value by moving a thumb along a track. The thumb is the movable control that indicates the current value.

Firefox exposes the thumb through ::-moz-range-thumb, allowing it to be styled independently of the track and the filled portion of the slider.

The thumb moves automatically as the slider value changes. CSS controls its appearance, while the min, max, step, and value attributes control the available values and starting position.

Changing the thumb's appearance does not change how the slider calculates or stores its value.

Styling the Slider Thumb

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

input[type="range"]::-moz-range-thumb {
  background-color: #0066cc;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

The background color fills the thumb, the border creates a visible outline, and border-radius: 50% produces a circular shape when the width and height are equal.

The cursor: pointer declaration displays a pointer cursor when hovering over the thumb in environments that support mouse interaction.

Changing the Thumb Shape

The thumb does not have to be circular. Its shape can be adjusted using dimensions and border radius.

For example, the following CSS creates a rounded rectangular thumb.

input[type="range"]::-moz-range-thumb {
  background-color: #28a745;
  border: 2px solid #1e7e34;
  border-radius: 5px;
  width: 16px;
  height: 26px;
}

The thumb becomes taller than it is wide, with slightly rounded corners. This creates a handle-like appearance rather than a circular button.

When changing the thumb's dimensions, test the result to ensure it remains aligned with the slider track and is easy to operate.

Example

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

HTML:

<label for="brightness">Brightness:</label>
<input type="range" id="brightness" min="0" max="100" value="70">

CSS:

input[type="range"] {
  width: 260px;
  accent-color: #0066cc;
}
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 70 out of 100. In Firefox, the thumb appears as a blue circle with a white border, while the track and filled section use separate colors.

Moving the thumb changes the input's value and updates the filled portion of the track. Other browsers may use their native slider appearance.

Cross-Browser Styling

Firefox and WebKit-based browser implementations expose different pseudo-elements for styling slider thumbs.

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

The following example uses separate rules to style the thumb in these browsers.

input[type="range"] {
  width: 260px;
  appearance: none;
  background: transparent;
}
input[type="range"]::-moz-range-thumb {
  background-color: #0066cc;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  background-color: #0066cc;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

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

Note: When using appearance: none, the browser's default slider styling is removed. A complete custom slider also needs appropriate track styling, which differs between browser engines.

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

Accessibility Considerations

Custom slider styling should preserve the control's usability for mouse, touch, and keyboard users.

Provide a visible label describing what the slider controls.
Keep the thumb large enough to identify and operate comfortably.
Maintain sufficient contrast between the thumb and track.
Preserve a visible keyboard focus indicator.
Do not remove the native input element or replace it with a non-interactive visual element.

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

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

The :focus-visible pseudo-class helps keyboard users identify which control currently has focus.

Browser Support

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

Other browser engines provide different internal pseudo-elements for styling range sliders. The HTML <input type="range"> control itself is widely supported.

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

Specifications

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