范围输入拇指随时间偏移

Question

我在Stackoverflow上都看过，似乎所有带有拇指标签的范围滑块都存在此问题。例如，this answer几乎没有，但是仍然有。

基本上，您可以计算value / max来获得范围值标签的left样式，以便它始终与拇指对齐。

问题是您向右滑动越远，它获得的偏移就越大。例如，在链接的答案中，标签从拇指左侧的0值开始，直到达到100时才慢慢滑动到拇指的右侧。

为什么会这样？我正在实施自己的解决方案，因此遇到了这个问题。另外，我在Stackoverflow上看到的每个答案都有这个问题。是什么原因造成的，有什么好的解决方法？

这是该问题的糟糕GIF：

Answer 1

之所以发生这种情况，是因为点的中心不代表该值。假设点的大小为10px，滑块的宽度为100px。当滑块值为0时，点的中心实际上位于0px + 5px，即0 * slider_width + 0.5 * dot_width。当滑块位于100％时，点的中心位于100px - 5px，即1 * slider_width - 0.5 * dot_width。

要解决此问题，您需要减去偏移量(percent_as_decimal - 0.5) * dot_width。小于50％时为负，因此减去时将相加。

现在，以上偏移量仅会影响元素左侧的放置位置。您还需要通过transform: translateX(-50%);将50％的译文放置在数字的容器中，以解决数字元素的宽度。

总结一下： 1）将数字的左侧对齐点的中心 2）转换数字以将数字的中心放在左侧的前面。