如何自定义chrome的范围类型？

Question

是否有人知道如何使用CSS将不同的样式应用于Chrome中范围输入的上下轨道？     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;