Initiatives along a line

What I want, in my game, is a UI element visible at the top of the screen to handle initiative - a timeline of upcoming events.
Visually what I want is very similar to a Slider element (button-like circles on a smooth bar). Mechanically I don't want players to be able to slide initiatives left and right when they want, and I do want initiatives to be visible if they stack up on the same space.
When a unit uses an ability, it will cost time, throwing their image to the right on the line.
When no units or events are at the leftmost spot, everything will move left until something is at Time 0. Then it is that thing's turn.
I think I have the logic for this managed. The moving left is a while loop (pseudocode: "While nothing in the initiative array is Time 0, subtract 1 from the Time value of each object in the array"). Tiebreaker is a separate variable, which logically boils down to "who got to the number first" - that is, when a unit jumps forward on the timeline it sets its Time to the place it just moved to and its Tiebreaker to the number of units already on that number.

My actual question, here:
I've got a UI bar with circles on it, up at the top of the screen.
How do I go about setting that bar as the legal space for the circles to be in?
If we're saying the bar is 50 spaces wide, ranging from 0 at the left edge to 50 at the right edge, how do I make sure the circles move along that range, treating 1 Time Unit as 1/50 of the transform width of that bar? I figure I need to have it calculated that way, so that whether you're playing this on your phone or your widescreen TV it still displays correctly.
Am I overthinking the problem? Does the "Unity units" system of measurement inherently solve this?

 

As a General rule - if you think you may be overthinking it, you probably are. But don't overthink it

Anyway, pbobably the best way to approach your goal is 'normalizing' it, making everything in your UI go from 0 to 1. That way it scales with you UI, and you'll have no headaches when you suddenly receive values you did not think of ahead of time.

To do that, determine the current minimum and Maximum values (call them min an max), and determine the rangle (range = max - min). And for Display purposes, nor make everything relative to min (by subtracting min) and divide by range, i.e. val --> (val - min) / range

Now all your values range from 0 to 1, and you can easily use them in your slider.

 

This is great! Thanks.