CSS ::-webkit-slider-runnable-track Pseudo-Element

The ::-webkit-slider-runnable-track pseudo-element is a non-standard CSS extension used to style the track of an HTML <input type="range"> element in supported WebKit and Blink-based browsers. It allows developers to customize the track's background, height, borders, and rounded corners while preserving the slider's native functionality.

Syntax

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}

The input[type="range"] selector identifies HTML range inputs, while ::-webkit-slider-runnable-track targets the track along which the slider thumb moves.

The height property sets the requested track height, background controls its appearance, and border-radius creates rounded corners.

The -webkit- prefix identifies a browser-specific extension rather than a standardized CSS pseudo-element.

These declarations affect the track's visual presentation but do not change the slider's minimum, maximum, or current value.

How It Works

The HTML <input type="range"> element allows users to select a numeric value within a defined range.

Browsers typically display the control as a horizontal track with a draggable thumb.

The track represents the available range of values, while the thumb indicates the currently selected value.

The ::-webkit-slider-runnable-track pseudo-element targets the track in supported WebKit and Blink implementations.

Developers can apply CSS to change the track's appearance without replacing the underlying HTML range input.

The browser continues to manage the slider's value, pointer interaction, and keyboard behavior.

However, the exact rendering and positioning of the track and thumb may vary between browsers and operating systems.

Slider Components

An HTML range slider contains two main visual components.

Track - The horizontal or vertical area representing the available range of values.
Thumb - The movable control that indicates and changes the selected value.

WebKit and Blink-based browsers expose separate pseudo-elements for these components.

::-webkit-slider-runnable-track - Targets the slider track.
::-webkit-slider-thumb - Targets the movable slider thumb.

Firefox provides different pseudo-elements for customizing range sliders.

::-moz-range-track - Targets the slider track.
::-moz-range-thumb - Targets the movable thumb.
::-moz-range-progress - Targets the portion of the track representing progress toward the current value.

There is no direct WebKit-prefixed equivalent of ::-moz-range-progress that provides the same filled-track behavior across browsers.

Styling the Track

The slider track can be customized with background colors, borders, and rounded corners.

input[type="range"] {
  width: 260px;
  appearance: none;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  background: #e0e0e0;
  border: 1px solid #bbb;
  border-radius: 5px;
}

The appearance: none declaration requests removal of the browser's native slider appearance so custom styling can be applied.

The transparent background allows the custom track to provide the visible background.

The track is given a light gray background, a thin border, and rounded corners.

Important: Removing the native appearance may also affect the slider thumb. A complete custom slider should include appropriate thumb styling to ensure that the control remains visible and usable.

Example

The following example creates a range slider with a gray track and a blue draggable thumb.

HTML:

<label for="volume">Volume: <output id="volume-value">50</output>%</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

CSS:

input[type="range"] {
  display: block;
  width: 260px;
  margin: 15px 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  background: #0066cc;
  border: 2px solid #fff;
  border-radius: 50%;
}
input[type="range"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 5px;
}

JavaScript:

const volume = document.getElementById("volume");
const volumeValue = document.getElementById("volume-value");

volume.addEventListener("input", function() {
  volumeValue.value = volume.value;
});

The slider starts at a value of 50 within a range of 0 to 100.

In supported WebKit and Blink browsers, the track appears light gray and the draggable thumb appears blue.

The negative top margin helps vertically center the 20-pixel thumb over the 8-pixel track in common WebKit and Blink implementations.

As the user moves the thumb, JavaScript updates the displayed volume value.

The :focus-visible rule provides a visible outline when keyboard focus is indicated.

Note: This example demonstrates WebKit-prefixed slider styling. Additional Mozilla-specific rules are needed for comparable custom styling in Firefox.

Using Gradients

The background property can apply a CSS gradient to the slider track.

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(to right, #0066cc, #00aaff);
  border-radius: 4px;
}

The linear-gradient() function creates a smooth transition from dark blue to light blue across the track.

The gradient covers the entire track and does not automatically change to represent the slider's current value.

For a similar appearance in Firefox, apply the same gradient to ::-moz-range-track.

input[type="range"]::-moz-range-track {
  height: 8px;
  background: linear-gradient(to right, #0066cc, #00aaff);
  border-radius: 4px;
}

When using gradients, ensure that the thumb remains visually distinguishable from the track.

Range Input Attributes

The HTML <input type="range"> element uses several attributes to control its numeric values and behavior.

min - Specifies the minimum permitted value.
max - Specifies the maximum permitted value.
value - Specifies the initial selected value.
step - Specifies the permitted increments between values.
disabled - Prevents users from changing the slider value.

For example, the following slider allows users to select values from 0 to 50 in increments of 5.

<label for="spacing">Spacing:</label>
<input type="range" id="spacing" min="0" max="50" step="5" value="20">

The slider begins at 20 and allows values such as 0, 5, 10, 15, and 20, up to 50.

The ::-webkit-slider-runnable-track pseudo-element affects the track's appearance but does not change these numeric constraints.

Use HTML attributes to define the permitted values and CSS to control how the slider looks.

Cross-Browser Styling

Different browser engines use different pseudo-elements for styling range slider tracks and thumbs.

Chrome, Edge, and Safari support the WebKit-prefixed selectors, while Firefox provides Mozilla-specific alternatives.

The following example provides a similar appearance across these browser engines.

input[type="range"] {
  width: 260px;
  margin: 15px 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}
input[type="range"]::-moz-range-track {
  height: 8px;
  background: #ddd;
  border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  background: #0066cc;
  border: 2px solid #fff;
  border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #0066cc;
  border: 2px solid #fff;
  border-radius: 50%;
}
input[type="range"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 5px;
}

The WebKit-prefixed rules style the track and thumb in supported Chrome, Edge, and Safari implementations.

The Mozilla-specific rules provide comparable styling in Firefox.

The Firefox thumb uses a 16-pixel content width and height with a 2-pixel border on each side, producing a total outer size of 20 pixels under the default content-box sizing model.

The negative top margin is applied only to the WebKit-prefixed thumb because slider thumb alignment differs between browser implementations.

Browser-specific pseudo-elements should be written in separate CSS rules rather than combined into a single selector list. A browser that does not recognize one of the selectors may ignore the entire combined rule.

Although these styles produce a similar appearance, small differences in track alignment, thumb positioning, and interaction may remain.

Accessibility Considerations

Custom range slider styling should preserve the accessibility and usability of the native HTML control.

Provide a visible <label> that identifies the slider's purpose.
Maintain a visible focus indicator for keyboard users.
Ensure that the thumb is large enough to operate comfortably with a pointer or touch input.
Maintain sufficient contrast between the track and thumb.
Do not rely entirely on color to communicate the selected value.
Preserve the slider's native keyboard interaction.
Display the selected value when users need to know the exact numeric setting.

Native range inputs support keyboard interaction, allowing users to adjust values without dragging the thumb.

When replacing the browser's default appearance, ensure that the customized track and thumb remain visible in different browser configurations and accessibility settings.

For settings such as volume, brightness, or spacing, displaying the current numeric value can help users understand the selected position.

Browser Support

::-webkit-slider-runnable-track is a non-standard browser-specific pseudo-element supported in WebKit and Blink-based browsers, including Safari, Chrome, and Edge.

Firefox uses ::-moz-range-track for styling the slider track.

The HTML <input type="range"> element is widely supported, but styling its internal components requires browser-specific selectors.

The exact appearance and behavior of customized sliders may vary between browser versions and operating systems.

For current compatibility information, visit Can I Use? and search for HTML range inputs. General range input support does not guarantee support for every browser-specific styling selector.

Specifications

::-webkit-slider-runnable-track is a proprietary browser extension and is not defined as a standardized pseudo-element in a CSS specification.

The HTML <input type="range"> element is defined in the WHATWG HTML Living Standard .

The HTML specification defines the range input's values and behavior but does not standardize the WebKit-specific pseudo-element used to style its track.