如何精确找到输入[type="range"]的拇指位置？

Question

这个想法是放置一个带有与滑块相关的值的工具提示。我最初想通过使用 css 来完成该任务grid。CSS 为您提供了任意大小的网格，10 列或 1000 列都没关系。通过利用网格功能，我们可以根据需要对齐工具提示。我们真正得到的是：

拇指的位置有点不可预测。看起来它正在偏移，偏移的方向取决于输入值是在滑块的左侧还是右侧。

注意：默认拇指的行为方式完全相同。我的意思是，拇指的形状并不重要。

那么，html如何根据拇指的值计算拇指的位置呢？

Answer 1

对于其他遇到这个问题的人来说，问题是拇指的第一个和最后一个位置偏移了 宽度的一半thumb。因此，所有其他位置都会稍微偏移，以补偿第一个和最后一个位置。

对此的一个简单的解决方案是在实际的第一个和最后一个拇指位置之间标准化拇指位置，它们分别是实际的0 + halfThumb和最后的width - halfThumb。

为了标准化，我们可以使用这个答案中推荐的公式。

因此left绝对定位元素的偏移量px将是：

const left = (((value - minValue) / (valueMax - valueMin)) * ((totalInputWidth - thumbHalfWidth) - thumbHalfWidth)) + thumbHalfWidth;

在哪里

value是实际输入值。

minValue是输入的实际最小值。

maxValue是输入的实际最大值。

thumbHalfWidth是用于滑块拖动的拇指宽度的一半。

totalInputWidth是输入元素的宽度（以像素为单位）。

Answer 2

你必须考虑你的尺寸thumb

可以使用一点点javascript来实现这一点（除非你可以获得我现在还不知道的范围比）

理论的

计算ratio当前的value相对于输入的min和的值（0 到 1 之间）max

(value - el.min) / (el.max - el.min)

因此它的位置（从相对于输入容器的箭头开始）将是：

thumbSize / 2 + ratio * 100% - ration * thumbSize

方法

这可能会让您了解如何在 javascript 中实现它

const thumbSize = 10
const range = document.querySelector('input[type=range]')
const tooltip = document.querySelector('.tooltip')

range.addEventListener('input', e => {
  const ratio = (range.value - range.min) / (range.max - range.min)
  tooltip.style.left = `calc(${thumbSize / 10}px + ${ratio * 100} - ${ratio} * ${thumbSize}px)`
}

上面的代码尚未测试，但已实现相同的方法