/CSS/Style input type range shaded part only

Style input type range shaded part only

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }
    
    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }
    
    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7; 
}
input[type="range"]::-moz-range-track {  
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7; 
}
input[type="range"]::-ms-fill-upper {  
  background-color: #9a905d;
}

Source: stackoverflow.com

Similar codes

145 votes340 views6 answers
Import bootstrap in react
CSS
2 votes243 views1 answer
Margin for text in html
CSS
1 vote286 views2 answers
Css div side rounded
CSS
3 votes258 views2 answers
Width css property
CSS
1 vote244 views1 answer
Serve : File C:\Users\MY PC\AppData\Roaming\npm\serve.ps1 cannot be loaded because running scripts is disabled on this system
CSS
26 votes279 views5 answers
Css multiple classes
CSS
0 vote252 views1 answer
Two background css
CSS
-1 vote269 views1 answer
Empty areas in the grid are defined using '.'
CSS
25 votes280 views5 answers
Css line spacing
CSS
17 votes265 views4 answers
Css center element on screen
CSS