范围滑块-如何在轨道上添加垂直线？

Question

我正在尝试在范围滑块的轨道上添加垂直的相交线。

我正在使用CSS（重复线性渐变）创建垂直线，但是当然，它们与“台阶”或拇指移至的位置均不对齐。该步骤当前设置为“ 10”。

此外，如果这能够做出响应，那就太好了。

感谢您的帮助！这是我的代码：

.slider-container {
  padding: 50px 0;
  background-image: repeating-linear-gradient( to right, #fff, #fff 3%, #ccc 3%, #ccc 6%);
  background-position: center;
}

.slider {
  width: 100%;
}

<div class="slider-container">
  <input type="range" min="-50" max="50" step="10" value="0" class="slider">
</div>