How to customize form range inputs in CSS

Keywords

Definition

Oddly enough, you might need to add range inputs on an HTML Form to let users define either a number or a threshold depending on the required data type, for instance, defining the amount of product ordered.

But, did you know that you can style range inputs without needing to use JavaScript? In pure CSS, you can customize range inputs to improve the user experience and to make consistent themes for your website instead of the default range input design.

I learned about this subject from css-tricks.com to go to the related tutorial⁽¹⁾, click here.

Code

There are two significant parts of a range input, named the track and the thumb. And, as you can see below, the range inputs can be customized in all supported browsers by specific CSS properties.

Plus, you can apply focus effects to the track to notify the user when the range input is triggered.


input[type=range] {-webkit-appearance: none;margin: 18px 0;width: 100%;}

input[type=range]:focus {outline: none;}

input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px black, 0px 0px 1px slategrey;
background: #FF9900;
border-radius: 1.3px;
border: 0.2px solid slategrey;
}

input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px slategrey;
border: 1px solid slategrey;
height: 36px;
width: 16px;
border-radius: 3px;
background: black;
cursor: pointer;
-webkit-appearance: none;
margin-top: -14px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
background: #cccccc;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px black, 0px 0px 1px slategrey;
background: #FF9900;
border-radius: 1.3px;
border: 0.2px solid slategrey;
}

input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px slategrey;
border: 1px solid slategrey;
height: 36px;
width: 16px;
border-radius: 3px;
background: black;
cursor: pointer;
}

input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}

input[type=range]::-ms-fill-lower {
background: slategrey;
border: 0.2px solid slategrey;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px black;
}

input[type=range]::-ms-fill-upper {
background: black;
border: 0.2px solid #cccccc;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #cccccc;
}

input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px slategrey, 0px 0px 1px slategrey;
border: 1px solid black;
height: 36px;
width: 16px;
border-radius: 3px;
background: #FF9900;
cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
background: #cccccc;
}

input[type=range]:focus::-ms-fill-upper {
background: #cccccc;
}



Result:

References

⁽¹⁾ https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/