javascript - 如何计算从左到中和从中到右的(增量)填充

Question

这是更多数学问题，但我认为它不适合数学部分。
我用居中的数字渲染此框。
盒子的整个宽度是350px。
我有最小和最大数字，例如 0-11，然后除以 350/11 以获得每个框的宽度。
下面我有一个 slider ，宽度也是 350px，拇指的宽度是 14px。
我想要的是拇指位置始终以其上方框中的数字为中心。
问题:

中间的数字很好，它总是在拇指的中心，但当我向左或向右移动时，数字不再居中。
如何根据宽度值计算框内数字的位置？

Answer 1

要根据 slider 参数计算总框宽度:

box_width = (slider_width - slider_track_width) * num_sub_boxes/(num_sub_boxes - 1)

在您的情况下box_width = 350px，num_sub_boxes = 11。如果您想从固定框宽度设置 slider 宽度，则可以反转公式:

slider_width = (1 - 1/num_sub_boxes) * box_width + slider_track_width

请注意， slider 拇指大小没有相关性(无论如何我认为 - 如果我错了请告诉我)。