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.