/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 vote169 views2 answers
How to select elements from a parrent element css
CSS
-1 vote171 views1 answer
Datepicker disable future date odoo
CSS
0 vote187 views1 answer
React bootstrap css module use media query mixin
CSS
26 votes196 views10 answers
Bootstrap
CSS Bootstrap
1 vote192 views1 answer
Html center video
CSS
50 votes183 views4 answers
Css reset code
CSS
185 votes281 views6 answers
Background image css
CSS
57 votes222 views4 answers
Css hover rounded corners
CSS
0 vote183 views1 answer
Make changes to api fetch onclick in react
CSS
1 vote170 views1 answer
Sf pro font html
CSS