Changing the color of a range slider in CSS can be achieved using the accent-color property. This property allows you to set the color of various form controls, including range sliders, to match the user's chosen accent color in their operating system.
Table of Content
Change the Color of Range Slider using 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:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change the Color of Range Slider</title>
<style>
.accent {
accent-color: red;
}
input {
width: 300px;
}
</style>
</head>
<body>
<input type="range" name="">
<br>
<input type="range" name="" class="accent">
</body>
</html>
Output:
Change the Color of Range Slider using background Property
The background property is used to set the background color of the range slider. This property works on <input type="range"> with -webkit- and -moz-. To change the background color of range slider, select the input range element using input[type="range"] selector with ::-webkit-slider-runnable-track (for Chrome, Safari, Opera, and Edge), and ::-moz-range-track (for Firefox) and applies background property to set the background color.
Example: Here's an example of how to use background property to change the color of a range slider:
<!DOCTYPE html>
<html>
<head>
<title>Change the Color of Range Slider</title>
<style>
body {
text-align: center;
}
/* For Chrome, Safari, Opera, and Edge */
input[type="range"]::-webkit-slider-runnable-track {
background: green;
height: 0.5rem;
}
/* For Firefox */
input[type="range"]::-moz-range-track {
background: green;
height: 0.5rem;
}
</style>
</head>
<body>
<input type="range" min="0" max="100" value="50" />
</body>
</html>
Output:
