Style input range with shadow dom

Question

I need to style input type range - to change background-color of the input, and change the apperance of the slider button (width, height, color ). So far I've managed to change the background-color of the input, but I can't find the way to select that slider button. I guess that it has to be done with shadow DOM, but can't figure out how.

<input id="my-range" type="range">

#my-range {
    -webkit-appearance: none;
    background-color: #592A71;
    width: 45%;
    height:15px;
    margin:30px;
}

Here is the example

Answer 1

Shadow-dom you're looking for can be found here , here's an example (copied from the link):

 input[type=range] { /*removes default webkit styles*/ -webkit-appearance: none; /*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]::-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]::-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]::-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 id="my-range" type="range"> 

Answer 2

The button that is hanging on range input is called a thumb. And this is how you select them.

Webkit/Blink - input[type=range]::-webkit-slider-thumb
Firefox - input[type=range]::-moz-range-thumb
IE - input[type=range]::-ms-thumb

Sample

 /* Special styling for WebKit/Blink */ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: red; } /* All the same stuff for Firefox */ input[type=range]::-moz-range-thumb { background: red; cursor: pointer; } /* All the same stuff for IE */ input[type=range]::-ms-thumb { background: red; cursor: pointer; } 

 <input id="my-range" type="range"> 

References:

Css Tricks

Other Link