Therorical

Question

这个想法是提供一个与滑块相关的工具提示。我最初想通过使用css grid完成该任务。 CSS为您提供任意大小，10或1000列的网格，并不重要。通过利用网格功能，我们可以根据需要调整工具提示。我们真正得到的是：

拇指位置有点不可预测。它似乎是偏移的，并且该偏移的方向取决于输入值是在滑块的左侧还是右侧。

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

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

Answer 1

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

一个简单的解决方案是将实际第一个和最后一个拇指位置之间的拇指位置归一化，实际上分别是0 + halfThumb和width - halfThumb。

要归一化，我们可以使用此answer中推荐的公式。

因此，left中绝对定位元素的px偏移为：

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

哪里

value是实际输入值。

minValue是输入的实际最小值。

maxValue是输入的实际最大值。

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

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

Answer 2

您必须考虑thumb

的大小

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

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

max

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

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

方法

这可能会让我们知道如何在javascript中实现它

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

以上代码尚未经过测试，但已实施相同的方法