How to Change the Color of Range Slider in CSS?

Last Updated : 24 May, 2025

The color of a range slider refers to the visual appearance of its track and thumb. You can customize the range slider's color in CSS using properties like accent-color, which provides around 60–70% control for quick and consistent styling across modern browsers. For more detailed and precise customization, covering about 90–100% of the slider's appearance, you can use browser-specific pseudo-elements like ::-webkit-slider-runnable-track, ::-webkit-slider-thumb, and ::-moz-range-track.

Changing Range Slider Color with the accent-color Property

The accent-color property sets the color of form controls such as checkboxes, radio buttons, and range sliders. It accepts any valid CSS color value. When using accent-color, the browser will automatically adjust the color based on the user's OS accent color settings.

Example: Here's an example of how to use accent-color to change the color of a range slider:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Change the Color of Range Slider</title>
    <style>
        .accent {
            accent-color: yellow;
        }
        input {
            width: 300px;
        }
    </style>
</head>
<body>
    <input type="range" name="">
    <br>
    <input type="range" name="" class="accent">
</body>
</html>

Output:

Changing Range Slider Color by Using pseudo-elements

In this approach, we change the color of the range slider's track using CSS pseudo-elements. For Chrome, Safari, Opera, and Edge, we use ::-webkit-slider-runnable-track. For Firefox, we use ::-moz-range-track. Both apply the background property to set the track color.

Example: Here's an example of how to use background property to change the color of a range slider:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Change the Color of Range Slider</title>
    <style>
        /* For Chrome, Safari, Opera, and Edge  */
        input[type="range"]::-webkit-slider-runnable-track {
            background: ;
            height: 0.5rem;
        }
        /* For Firefox */
        input[type="range"]::-moz-range-track {
            background: brown;
            height: 0.5rem;
        }
    </style>
</head>
<body>
    <input type="range" min="0" max="100" value="50" />
</body>
</html>

Output:

output

How to Change the Border Color on Hover in CSS ?

ashokjaiswal

Improve

Article Tags :

How to Change the Color of Range Slider in CSS?

Changing Range Slider Color with the accent-color Property

Changing Range Slider Color by Using pseudo-elements

Similar Reads

Thank You!

What kind of Experience do you want to share?