/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

0 vote108 views2 answers
Cons;0 ccs
CSS
4 votes123 views1 answer
How to move anything left in css
CSS
8 votes118 views1 answer
Full screen image
CSS
15 votes118 views2 answers
Transition background gradient
CSS
0 vote106 views1 answer
Chenge number of lines of text in css
CSS
2 votes67 views1 answer
How to bring default values in css
CSS
0 vote97 views2 answers
Nativescript hr
CSS
0 vote123 views1 answer
Css rotate 3d
CSS
2 votes125 views2 answers
Mysqldump: Error: 'Access denied; you need (at least one of) the PROCESS privilege(s) for this operation' when trying to dump tablespace
CSS
0 vote107 views1 answer
Switch css with text
CSS