具有拇指和可运行轨道的范围滑块具有不同的不透明度

Question

我正在尝试创建一个滑块，其中可运行的轨道和拇指具有不同的不透明度。

下图说明了我想要实现的目标。

但是，如果我改变了可运行轨道和拇指的不透明度

input[type=range].vslider::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background-color: #444;
  color: #444;
  height: 10px;
  width: 400px;
  opacity: 0.2;
}

input[type=range].vslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: white;
  width: 15px;
  height: 30px;
  transform: translateY(-10px);
  opacity: 1.0;
}

，拇指获得与可运行轨道相同的不透明度。

所以我的问题是，甚至可以让可运行轨道的不透明度小于拇指不透明度？