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

Question

这是更多的数学问题，但我认为它不适合数学部分。
我用数字居中渲染了这个框。
盒子的整个宽度是350px.
我有像0-11 这样的最小和最大数字，我划分350/11 以获得每个框的宽度。
下面我有一个滑块，其宽度也是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

请注意，滑块的拇指大小无关紧要（无论如何我认为 - 如果我错了，请告诉我）。