Seeking Expertise: How Can I Align a Range Slider's Thumb and Value Display Perfectly?

Question

I've been working on a web development project, and I've encountered a particularly challenging issue. I've been trying to create a range slider where the thumb and the displayed value are perfectly aligned. I want the value to always be 0.5em above the thumb, providing a seamless user experience. However, despite numerous attempts and experimenting with HTML, CSS, and JavaScript, I haven't been able to achieve this effect without complex calculations.

I'd greatly appreciate any assistance or guidance on how to make this work effectively. If you have experience with creating range sliders that display values directly above the thumb without complex calculations, or if you have alternative methods or solutions to tackle this problem, your insights would be incredibly valuable. Thank you in advance for any help or suggestions you can provide.

The value will be live data. But to start I want to put a static value, look at codepen below.

The image attached is in reference to this code. middle and centered off centered deviation left off centered deviation right

* {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
}

html, body, form, form * {
    display: grid;
}

.js {
    --js: 1 ;
}

body, datalist {
    place-content: center;
}

body {
    font: 1em/1.25 ubuntu, sans-serif;
}

form, option {
    place-items: center;
}

form {
    --extra: 0;
    --large: 0;
    --not-large: calc(1 - var(--large));
    --small: 0;
    --not-small: calc(1 - var(--small));
    --track-w: min(25em, 100vw - 2*1.75em);
    overflow-x: hidden;
    padding: 0.875em;
    background: hsla(0, 0%, 91%, var(--hl));
    filter: grayScale(calc(1 - var(--hl, 0)));
    transition: 0.35s;
}
@media (min-width: 28.5em) {
    form {
        --extra: 1 ;
    }
}
@media (min-width: 320px) {
    form {
        --large: 1 ;
    }
}
@media (max-width: 220px) {
    form {
       --small: 1 ;
    }
}
form:focus-within, form:hover {
    --hl: 1 ;
}

label {
    font-size: 137.5%;
}

[for] {
    font-weight: 700;
}

input {
    width: calc(var(--track-w) + 1.75em);
    background: linear-gradient(90deg, #ff0000 0 20%, #F8C045  20% 40%, #51B052 40% 60%, #F8C045  60% 80%, #ff0000 0) 50%/var(--track-w) 0.375em no-repeat;
    cursor: pointer;
}
input::-webkit-slider-runnable-track, input::-webkit-slider-thumb, input {
    -webkit-appearance: none;
}
input::-webkit-slider-thumb {
    margin-top: -0.35em;
    border: none;
    width: 1.75em;
    height: 1.75em;
    background: currentcolor;
    --poly: polygon(50% 100%, 6.6987298108% 25%, 93.3012701892% 25%);
    -webkit-clip-path: var(--poly);
    clip-path: var(--poly);
    cursor: ew-resize;
}
input::-moz-range-thumb {
    margin-top: -0.35em;
    border: none;
    width: 1.75em;
    height: 1.75em;
    background: currentcolor;
    --poly: polygon(50% 100%, 6.6987298108% 25%, 93.3012701892% 25%);
    -webkit-clip-path: var(--poly);
    clip-path: var(--poly);
    cursor: ew-resize;
}
input:focus {
    outline: none;
}
input + output {
    --rng: calc(var(--max) - var(--min));
    --pos: calc((var(--val) - var(--min))/var(--rng)*var(--track-w));
    display: var(--js, none);
    grid-row: 2;
    justify-self: start;
    transform: translate(calc(.5*1.75em + var(--pos) - 50%));
    counter-reset: val var(--val);
}
input + output::after {
    content: counter(val);
}

datalist {
    --track-u: calc(var(--track-w)/var(--n));
    grid-auto-flow: column;
    width: calc(var(--track-w) + 1px);
    box-shadow: inset 0 1px currentcolor;
    background: linear-gradient(90deg, currentcolor 1px, transparent 0) repeat-x;
    background-size: calc(var(--track-u)/5) calc(var(--extra)*.5*0.875em);
}

option {
    --m: calc(var(--large));
    width: calc(var(--m)*var(--track-u));
    transform-origin: 50% 0;
    transform: scale(min(1, var(--m)));
    transition: transform 0.35s;
}
option:nth-child(odd) {
    --m: calc(var(--large) + 2*var(--not-large)*var(--not-small)) ;
}
option:first-child, option:last-child {
    --m: calc(var(--large) + var(--not-large)*(2*var(--not-small) + .5*var(--n)*var(--small))) ;
}
option.mid {
    --m: calc(var(--large) + var(--not-large)*.5*var(--n)*var(--small)) ;
}
option::before {
    width: 2px;
    height: 0.875em;
    background: currentcolor;
    content: "";
}

<form style="--min: 40; --val: 40.9; --max: 60; --n: 2">
    <label for="r">Price range</label>
    <input id="r" type="range" value="40.9" list="l"/>
    <output for="r"></output>
    <datalist id="l">
        <option class="first" value="40">40</option>
        <option class="mid">50</option>
        <option class="seventh" value="60">60</option>
    </datalist>
</form> 

The codepen is here, with all the code: https://codepen.io/Carlo-Jacques/pen/wvRVvJr

Thank you in advance for the help.

I tried using 100% instead of using 100vw for track width but that did not work. I need the track width and data to completely fill out the div it is in.