How to customise range type for chrome?

Question

Does anyone know of a way to apply different styles to the upper and lower tracks of a range input in Chrome using CSS ? Something similar to this

 input[type=range]::-webkit-fill-lower {
  background: #ff0000;
  border: 0.2px solid #ff0000;
   }

input[type=range]::-webkit-fill-upper {
  background: #bfbfbf;

   }

input[type=range]:focus::-webkit-fill-lower {
  background: #ff0000;
}

input[type=range]:focus::-webkit-fill-upper {
  background: #bfbfbf;