Customize the input range of a website is a common problem in front-end development. In this post I will show you how to create a custom cross-browser input range in HTML and CSS3.


The general selector, common to all the browsers to start styling a range input is: input[type=range]. You can add a class if you don’t want to style all the range input in this way. e.g input.myRange. The webkit browsers, like Safari and Chrome also need a reset property to allow you customize the style. It is enought to add -webkit-appearance: none; in the element style:


1
2
3
input[type=range] {
	-webkit-appearance: none;
}


In the table below you can find a summary of the selector used to style a range input.

Safari and Chrome Firefox Internet Explorer/ Edge
input[type=range]::-webkit-slider-runnable-track input[type=range]::-moz-range-track input[type=range]::-ms-track
input[type=range]::-ms-fill-lower
input[type=range]::-ms-fill-upper
input[type=range]::-webkit-slider-thumb input[type=range]::-moz-range-thumb input[type=range]::-ms-thumb


Node that IE/EDGE properties are not standard and they could work different on different OS or change in the future