Trouble styling range input thumb

Question

I'm trying to do some basic styling in an html range input with the follow:

HTML

<input type="range" min="0" value="50" max="100" step="1" />

CSS

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance : none;
  background : red;
  height : 20px;
  width : 20px;
}

I also made a Codepen you can look at.

You'll notice that if you comment out the background, height and width styles the thumb does dissapear. So something is working. But with the styles applied I'd expect it to be a 20px X 20px red square. But alas, I just see the default thumb styling.

Answer 1

As requested, see my rough basic styling 'input type="range"' hack.
Suitable for Chrome, Safari, Opera, and Edge Chromium.

input[type="range"]::-webkit-slider-thumb {
  transform: scale(2); /* makes thumb larger */
  box-shadow: 0 0 0 2px var(--lemon-green); /* box shadow works like a border */
  border-radius: 50%; /* makes box shadow/border a perfect circle ins shape */
}

Rest of code:

input[type="range"] {
  width: 90%;
  accent-color: black;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: green;
  height: 1rem;
}

Answer 2

If you are able to edit the track, but NOT the thumb, then be sure that you have -webkit-appearance: none; in these two places to override default behavior.

input[type=range] {
    -webkit-appearance: none; <------------------------------------ REQUIRED
}

input[type=range]::-webkit-slider-runnable-track {
    background: /* ...change color with background property... */;
    /* ...my custom edits...*/
}

input[type=range]:hover::-webkit-slider-runnable-track {
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; <------------------------------------ REQUIRED
    height: /* ..manually set height greater than 0... */ <-------- REQUIRED
    width: /* ..manually set width greater than 0... */ <---------- REQUIRED
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

input[type=range]:hover::-webkit-slider-thumb {
    background: /* ...change color with background property... */;
    /* ...my custom edits... */
}

(Note that this works in Chrome, but you can comma separate other properties like input[type=range]::-moz-range-thumb and input[type=range]::-ms-thumb as needed to account for other browsers)

Answer 3

1. Hide the input - this hides thumb and track

2. Style the thumb as you'd like

3. Style the track

caveat: the track aligns with the top of the thumb. I used a negative margin to correct this. If someone has a better way of doing this that would be nice...

input[type=range] {
  -webkit-appearance: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: red;
  height: 20px;
  width: 20px;
  margin-top: -8px;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ddd;
}

<input type="range" min="0" value="50" max="100" step="1" />

CODEPEN

Good resource here for ensuring browser compatibility.

Answer 4

So the issue why the styles didn't get applied to the thumb is that you also have to add

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

.. The thumb is now a red square.

Answer 5

It would seem the following selector is causing the issue and your styles aren't working because of that, please remove it and the styles will apply:

::-webkit-slider-thumb

Here is an updated Codepen.

Updated Answer

Several styles need to be applied to range inputs in all browsers to override their basic appearance. After declaring the below styles you will be able to style the range toggler.

Please see the below and add it to your code:

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

Please see this link to the updated Codepen.

Answer 6

Please check with the below answer

input[type=range] {
   -webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
   width: 300px;
   height: 5px;
   background: #ddd;
   border: none;
   border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: none;
   height: 16px;
   width: 16px;
   border-radius: 50%;
   background: goldenrod;
   margin-top: -4px;
}
input[type=range]:focus {
   outline: none;
}
 input[type=range]:focus::-webkit-slider-runnable-track {
   background: #ccc;
}
input[type=range] {
   /* fix for FF unable to apply focus style bug  */
   border: 1px solid white;
   /*required for proper track sizing in FF*/
   width: 300px;
}
 input[type=range]::-moz-range-track {
   width: 300px;
   height: 5px;
   background: #ddd;
   border: none;
   border-radius: 3px;
}
 input[type=range]::-moz-range-thumb {
   border: none;
   height: 16px;
   width: 16px;
   border-radius: 50%;
   background: goldenrod;
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring {
   outline: 1px solid white;
   outline-offset: -1px;
}
 input[type=range]:focus::-moz-range-track {
   background: #ccc;
}

/* for ie */

input[type=range]::-ms-track {
   width: 300px;
   height: 5px;

/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
   background: transparent;

/*leave room for the larger thumb to overflow with a transparent border */
   border-color: transparent;
   border-width: 6px 0;

/*remove default tick marks*/
   color: transparent;
}
input[type=range]::-ms-fill-lower {
   background: #777;
   border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
   background: #ddd;
   border-radius: 10px;
}
input[type=range]::-ms-thumb {
   border: none;
   height: 16px;
   width: 16px;
   border-radius: 50%;
   background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
   background: #888;
}
input[type=range]:focus::-ms-fill-upper {
   background: #ccc;
}

<input type="range" min="0" value="50" max="100" step="1" />