1. Home
  2. Knowledge Base
  3. HTML
  4. How to Style HTML Input Range
  1. Home
  2. Knowledge Base
  3. CSS
  4. How to Style HTML Input Range

How to Style HTML Input Range

To style the input range, we use the following vendor pseudo selectors.

Firefox:
::-moz-range-track
::-moz-range-thumb

Internet Explorer:
::-ms-thumb
::-ms-track
::-ms-fill-lower
::-ms-fill-upper

Webkit (Chrome, Safari, Opera):
::-webkit-slider-runnable-track
::-webkit-slider-thumb

Although it is possible to apply styles directly to input[type=range], you may run into problems with older browsers that have yet to implement to correct styles. Because of this we recommend using the vendor pseudo selectors to customize the range thumb and track.
You can also use the :focus pseudo class to style the input range when the user has selected the tag.

I hope you enjoy using the HTML Input Range Generator and can come up with some unique and interesting styles to use on you webpage. If you have designed something that you’re proud of and wish to show it off, just contact me with the code generated and I will add the design to the preset designs.

Was this article helpful?

Related Articles