How to calculate (increment) padding from left to middle and from middle to right

0
votes

enter image description here

This is more math question but I think it's not for math section.
I render this boxes with numbers centered in it.
The whole width of the box is 350px.
I have min and max number like 0-11 and I divide 350/11 to get each box width.
Bellow this I have a slider that is also 350px width and thumb in it is 14px.
What I want is that thumb position is always centered on number in a box above it.
Problem:

Middle number is fine it is always in center of the thumb, but as I go left or right number is not centered any more and more.
How I can calculate position for number inside box based on width values?

1
javascriptmathreact-nativeslidercss-position
What is a / the "thumb"? – meowgoesthedog
Thumb on the slider: articulate-heroes.s3.amazonaws.com/sliders5uz6pq0.png – 1110
Are you sure you want to change the position of the text inside each sub-box instead of scaling the box width itself? – meowgoesthedog
I mean it's whatever to me I am trying just to center thumb and it's number. Like on this image: i.stack.imgur.com/xGo3i.png – 1110

1 Answers

1
votes

To calculate the total box width from the slider parameters:

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

In your case box_width = 350px, num_sub_boxes = 11. You can invert the formula if you want to set the slider width from a fixed box width instead:

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

Note that the slider thumb size has no relevance (I think anyway - let me know if I'm wrong).