CSS Styling Webkit Input Ranges with Pure CSS

In this article, we’ll show you how to style Webkit input ranges using pure CSS.

Read more: CSS Tutorial

What is an input range?

Input ranges are a type of HTML5 element used to create interactive elements such as sliders and controls on web pages. When the user drags a slider, you can use JavaScript to listen for events to retrieve the current value and perform corresponding actions.

Styling Input Ranges with CSS

In WebKit browsers like Safari and Chrome, we can use some CSS properties to style input ranges.

First, we can use the -webkit-appearance property to remove the default appearance:

input[type="range"] {
-webkit-appearance: none;
}

Next, we can use the background property to set the background color of the slider:

input[type="range"] {
background: #ddd;
}

We can also use the ::-webkit-slider-thumb pseudo-element to style the slider:

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
cursor: pointer;
}

Alternatively, we can use the ::-webkit-slider-runnable-track pseudo-element to style the slider track:

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

This is just a simple example; you can customize the style further to suit your needs. By adjusting the values ​​of these properties, you can create a variety of different input range styles.

Browser Compatibility

Note that CSS properties prefixed with the -webkit prefix only work in WebKit browsers, such as Safari and Chrome. These styles may not work in other browsers.

To achieve the same effect in other browsers, you may need to use different prefixes or add additional styles. For example, the following styles work in Firefox:

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

input[type="range"]::-moz-range-thumb {
-moz-appearance: none;
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
cursor: pointer;
}

input[type="range"]::-moz-range-track {
height: 4px;
background: #999;
}

Therefore, to achieve cross-browser compatibility, you may need to write some browser-specific CSS rules.

Demo

<input type="range" min="0" max="100" step="5"> 

In the above example, we created a range input that takes values ​​from 0 to 100, adjusting the value in steps of 5.

Summary

Using pure CSS, we can style range inputs, including sliders and thumbs, in Webkit browsers. We can customize the appearance of the input range using CSS properties and pseudo-elements such as -webkit-appearance, background, ::-webkit-slider-thumb, and ::-webkit-slider-runnable-track. However, it’s important to note that these styles only apply to WebKit browsers. For cross-browser compatibility, you may need to write CSS rules specific to other browsers.