Move object smoothly from start to end of parent without overlap - css

Question

I would like to simulate a slider using CSS. This code pen shows a minimum working example.
The left property of the slider can be set using javascript or, as in the code pen example, by setting a CSS variable from 0 to 100.
At 0% the slider should sit on the left of its parent. At 100% the slider should sit flush with the right.
The parent is a flex child with its width set by flex-grow, and it shares its row with another flex child.
In the image below, the parent of the slider is yellow, and the slider itself is teal. A neighbouring flex child is shown in orange:
When the CSS variable (or Javascript variable) reaches 100%, the slider's right-hand edge should sit flush with the right-hand edge of the yellow box, but currently it moves like this:
I thought I could calculate the left property using something like:
calc((100% - 40px) / 100%)
But as MDN states, the right-hand side of a division must be a number.
Am I missing something obvious?
.full {
display: flex;
height: 50px;
max-width: 600px;
}
.full p {
float: left;
padding-left: 10px;
}
.left {
flex-grow: 8;
background-color: yellow;
padding: 5px 0;
}
.right {
flex-grow: 2;
background-color: orange;
}
.slider {
height: 100%;
width: 40px;
background-color: steelblue;
opacity: 0.9;
}
.slider {
position: relative;
--complete: 100%;
left: calc(var(--complete));
}
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>

Answer 1

You can adjust the calculation and remove the percentage from --complete:
--complete:80;
left: calc( var(--complete) * 1% - var(--complete) * (40px/100));
Full code:
.full {
display: flex;
height: 50px;
max-width: 600px;
}
.full p {
float: left;
padding-left: 10px;
}
.left {
flex-grow: 8;
background-color: yellow;
padding: 5px 0;
}
.right {
flex-grow: 2;
background-color: orange;
}
.slider {
height: 100%;
width: 40px;
background-color: steelblue;
opacity: 0.9;
}
.slider {
position: relative;
--complete:80;
left: calc( var(--complete) * 1% - var(--complete) * (40px/100));
}
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:100">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:0">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:50">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:20">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
Or combine it with transform and use it like this:
--complete: 80%;
left: calc(var(--complete));
transform: translateX(calc(-1 * var(--complete)));
.full {
display: flex;
height: 50px;
max-width: 600px;
}
.full p {
float: left;
padding-left: 10px;
}
.left {
flex-grow: 8;
background-color: yellow;
padding: 5px 0;
}
.right {
flex-grow: 2;
background-color: orange;
}
.slider {
height: 100%;
width: 40px;
background-color: steelblue;
opacity: 0.9;
}
.slider {
position: relative;
--complete: 80%;
left: calc(var(--complete));
transform: translateX(calc(-1 * var(--complete)));
}
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:100%">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:0%">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:50%">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>
<div class="full">
<div class="left">
<p>flex-grow: 8</p>
<div class="slider" style="--complete:20%">
</div>
</div>
<div class="right">
<p>flex-grow: 2</p>
</div>
</div>

Answer 2

Thanks to a useful tip-off from Temani Afif about using translateX as well as left, I have managed to put together a solution which isn't pretty, but works.
I'm still open to more 'attractive' solutions.
.slider {
position: relative;
--complete: 100;
left: calc(1% * var(--complete));
transform: translateX(calc(-40px * var(--complete) / 100));
}