Change Range Slider Color Using CSS

Change Range Slider Color Using CSS

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 2 mins read

To change the color of a range slider using CSS, you can use the ::-webkit-slider-thumb pseudo-element to style the thumb of the slider and the background-color property to set the color. Here is an example:

Change Range Slider Color Example

input[type="range"]::-webkit-slider-thumb {
  background-color: #333;
}

This will set the color of the thumb of the range slider to a dark gray color. You can change the color to any other color by using the appropriate color code or name.

Here is an example of how you can use this CSS code to style a range slider:

<input type="range" min="0" max="100" value="50">
input[type="range"]::-webkit-slider-thumb {
  background-color: #333;
}

This will apply the style to the thumb of the range slider, changing its color to the specified color.

You can also use the ::-webkit-slider-thumb pseudo-element in combination with other CSS selectors to target specific range sliders. For example:

/* Style only range sliders with the "volume" class */
.volume input[type="range"]::-webkit-slider-thumb {
  background-color: #333;
}

/* Style only range sliders inside a "brightness" element */
#brightness input[type="range"]::-webkit-slider-thumb {
  background-color: #333;
}

These examples demonstrate some of the ways that you can use the ::-webkit-slider-thumb pseudo-element and the background-color property to style range sliders with CSS. You can use these techniques to create more sophisticated and user-friendly interfaces in your web applications.

Here are some more examples of using the ::-webkit-slider-thumb pseudo-element to style range sliders with CSS:

/* Use a custom font color for the thumb of the range slider */
input[type="range"]::-webkit-slider-thumb {
  color: #00f;
}

/* Add a border around the thumb of the range slider */
input[type="range"]::-webkit-slider-thumb {
  border: 1px solid #333;
}

/* Change the size of the thumb of the range slider */
input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
}

You can also use the ::-webkit-slider-thumb pseudo-element in combination with other CSS selectors to target specific range sliders. For example:

/* Style only range sliders with the "volume" class */
.volume input[type="range"]::-webkit-slider-thumb {
  background-color: #333;
}

/* Style only range sliders inside a "brightness" element */
#brightness input[type="range"]::-webkit-slider-thumb {
  background-color: #333;
}

These examples demonstrate some of the ways that you can use the ::-webkit-slider-thumb pseudo-element and the background-color property to style range sliders with CSS. You can use these techniques to create more customizable and user-friendly interfaces in your web applications.Try again

Related: