CSS ::-webkit-slider-thumb Pseudo-Element

The ::-webkit-slider-thumb pseudo-element is a non-standard CSS extension used to style the draggable thumb of an HTML <input type="range"> element in supported WebKit and Blink-based browsers. It allows developers to customize the thumb's size, color, border, shape, and visual effects while retaining the range input's native functionality.

Syntax

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

The input[type="range"] selector identifies HTML range inputs, while ::-webkit-slider-thumb targets the draggable thumb.

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

The width and height properties define the thumb's dimensions, while background and border-radius control its color and shape.

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

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 track with a movable thumb.

The thumb indicates the currently selected value and can be moved using a pointer, touch input, or keyboard.

The ::-webkit-slider-thumb pseudo-element targets this movable component in supported WebKit and Blink implementations.

Developers can change the thumb's appearance without replacing the underlying HTML range input.

The browser continues to manage the selected value, movement constraints, and native interaction behavior.

CSS styling does not change the slider's minimum, maximum, or permitted value increments.

Slider Components

An HTML range slider contains two main visual components.

Track - The area representing the available range of values.
Thumb - The movable control used to select a value along the track.

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 draggable thumb.

Firefox provides different pseudo-elements for range slider customization.

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

These selectors allow the track and thumb to be styled independently, although the exact rendering behavior differs between browser engines.

Styling the Thumb

The ::-webkit-slider-thumb pseudo-element supports common visual properties such as background colors, borders, rounded corners, and shadows in compatible implementations.

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

The thumb has a blue background, a white border, and a circular shape.

The box-shadow property adds a subtle shadow around the thumb.

The border-radius: 50% declaration creates a circular thumb when its width and height are equal.

Removing the native appearance may also require custom track styling to keep the slider usable and visually consistent.

Thumb Size and Alignment

When customizing a range slider, the thumb is often larger than the track.

In common WebKit and Blink implementations, a negative top margin can help vertically center the thumb over a horizontal track.

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-radius: 50%;
}

The track is 8 pixels high, while the thumb is 20 pixels high.

The difference is 12 pixels, so a negative top margin of 6 pixels moves the thumb upward by half that difference.

This adjustment helps center the thumb over the track in common WebKit and Blink implementations.

Note: Thumb alignment is browser-dependent. Firefox generally handles track and thumb positioning differently and does not normally require the same negative margin.

Example

The following example creates a range slider with a gray track, a blue circular thumb, and a displayed numeric value.

HTML:

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

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%;
  box-shadow: 0 0 3px #777;
}
input[type="range"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 5px;
}

JavaScript:

const fontSize = document.getElementById("font-size");
const fontSizeValue = document.getElementById("font-size-value");

fontSize.addEventListener("input", function() {
  fontSizeValue.value = fontSize.value;
});

The slider allows values from 12 to 36 and starts at 20.

In supported WebKit and Blink browsers, the track appears gray and the thumb appears as a blue circle with a white border.

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

The :focus-visible rule provides a visible focus indicator for keyboard interaction.

Note: The example demonstrates WebKit-prefixed styling. Additional Mozilla-specific rules are required for comparable custom styling in Firefox.

Hover and Active States

CSS pseudo-classes can be used with the range input to change the thumb's appearance during interaction.

input[type="range"]:hover::-webkit-slider-thumb {
  background: #004c99;
}
input[type="range"]:active::-webkit-slider-thumb {
  background: #003366;
}
input[type="range"]:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 5px;
}

The :hover rule changes the thumb's background when the pointer is over the range input.

The :active rule applies a darker background while the input is being activated.

The :focus-visible rule adds an outline when the browser determines that a visible keyboard focus indicator is appropriate.

These states provide visual feedback without changing the slider's numeric behavior.

Because :hover targets the entire input, the hover style may apply when the pointer is over the track rather than directly over the thumb.

Custom Thumb Shapes

The thumb does not have to be circular. CSS properties can create square, rounded-square, or other simple shapes.

Square Thumb

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #0066cc;
  border: none;
  border-radius: 0;
}

The border-radius: 0 declaration creates square corners.

Rounded-Square Thumb

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  background: #0066cc;
  border: none;
  border-radius: 5px;
}

The border-radius: 5px declaration rounds the corners while preserving a generally square shape.

Thumb with a Shadow

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px solid #0066cc;
  border-radius: 50%;
  box-shadow: 0 2px 5px #888;
}

This example creates a white circular thumb with a blue border and a subtle shadow.

When changing thumb dimensions, adjust its alignment with the track as needed.

Cross-Browser Styling

Different browser engines use different pseudo-elements for customizing range slider thumbs.

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

The following example provides similar thumb and track styling across these browsers.

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;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  background: #0066cc;
  border: 2px solid #fff;
  border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  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 box-sizing: border-box declaration ensures that the specified thumb dimensions include the border.

The negative top margin is applied only to the WebKit-prefixed thumb because alignment behavior 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 selector may ignore the entire combined rule.

Small differences in thumb alignment, track positioning, and rendering may remain across browsers and operating systems.

Accessibility Considerations

Custom range slider thumbs should remain easy to see, identify, and operate.

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

Native HTML range inputs provide built-in keyboard and accessibility behavior. Styling the thumb does not remove those semantics, but developers should ensure that the customized control remains usable.

When replacing the native appearance, test the slider with a keyboard, mouse, and touch input where available.

Also verify that the thumb remains visible in high-contrast or forced-colors environments.

Browser Support

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

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

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

The exact appearance and positioning of custom thumbs 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-thumb 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 thumb.