Track Styles
*The track is the element that the thumb runs along.
Thumb Styles
*The thumb is used to select varying range values.
/*********** Baseline, reset styles ***********/
input[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
width: 25rem;
}
/* Removes default focus */
input[type="range"]:focus {
outline: none;
}
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
background-color: #add8e6;
border-radius: 0.5rem;
height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -4px; /* Centers thumb on the track */
background-color: #808080;
border-radius: 0.5rem;
height: 1rem;
width: 1rem;
}
input[type="range"]:focus::-webkit-slider-thumb {
outline: 3px solid #808080;
outline-offset: 0.125rem;
}
/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
background-color: #add8e6;
border-radius: 0.5rem;
height: 0.5rem;
}
/* slider thumb */
input[type="range"]::-moz-range-thumb {
background-color: #808080;
border: none; /*Removes extra border that FF applies*/
border-radius: 0.5rem;
height: 1rem;
width: 1rem;
}
input[type="range"]:focus::-moz-range-thumb{
outline: 3px solid #808080;
outline-offset: 0.125rem;
}
About this Project
Range inputs have notoriously been a pain to style. Each browser renders the input differently requiring you to use vendor prefixes in order to create a cohesive look and feel. To speed up the process, I created this tool to make it easier for you to create custom range inputs that will look awesome and consistent across all browsers!
🔖 To learn more, check out my Smashing Magazine article describing the quirkiness of the range input.