如何使范围的左半部分输入与另一侧不同的颜色？

Question

我正在尝试将this改成this

这是我的代码

.slider {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #007fff;
  cursor: pointer;
  margin-top: 0px;
}
.slider::-moz-range-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: #007fff;
  cursor: pointer;
  margin-top: 0px;
}
.slider::-ms-thumb {
  height: 14px;
  width: 14px;
  border-radius: 10px;
  background: #007fff;
  cursor: pointer;
  margin-top: 0px;
}
.slider:focus {
  outline: none;
}
.slider::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
  background: white;
  width: 100%;
  height: 6px;
  border-radius: 10px;
}
.slider::-webkit-slider-runnable-track {
  background: white;
  height: 6px;
  width: 100%;
  border-radius: 10px;
}
.slider:focus::-webkit-slider-runnable-track {
  background: white;
}
.slider::-moz-range-track {
  background: white;
  width: 100%;
  height: 6px;
  border-radius: 10px;
}
.slider::-ms-fill-lower {
  background: #007fff;
  border-radius: 10px;
}
.slider:focus::-ms-fill-lower {
  background: #007fff;
}
.slider::-ms-fill-upper {
  background: white;
  border-radius: 10px;
}
.slider:focus::-ms-fill-upper {
  background: white;
}

和

<div class="sliderdiv"><input type="range" class="slider" id="myRange"></div>

div用于对齐目的。另一件事，我需要有一个点，而不是一条线。这样吧

============== 0 ------------

感谢您的帮助！

内森（Nathan：）

此外，我已经对此进行了研究，但是我在这里找到的大多数方法，w3schools和css-tricks均不起作用，并且最终看起来像这篇文章中链接的第一个图像。