如何从左到中和从中到右计算（递增）填充

Question

这是更多的数学问题，但我认为它不适用于数学部分 我用这个数字居中的方框​​来渲染这个方框 框的整个宽度为350px 我有最小和最大数量，如0-11，我将350/11除以得到每个方框宽度 Bellow this我有一个滑块也是350px宽度和拇指是14px 我想要的是拇指位置始终以其上方的方框中的数字为中心 的问题：

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

Answer 1

要从滑块参数计算总框宽度：

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

在您的情况下box_width = 350px, num_sub_boxes = 11。如果要从固定的框宽度设置滑块宽度，则可以反转公式：

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

请注意，滑块拇指尺寸没有相关性（无论如何我想 - 如果我错了，请告诉我。）