When moving mouse fast slider dosen’t go to end of designated range, and stops short

So I have a slider, and it’s set to max out at a certain point based on external variables, but if I move the mouse fast towards the max, it stops short and not at the max. How can I avoid this, and have the slider stop at the maximum? Here’s a video of what I mean, and hopefully all the relevant code.

Video: https://clipchamp.com/watch/NNqMIjnL6TW

HTML:

<div class="weight">
            <!-- maybe use ::before for label -->
            <!-- need four of these -->
            <!-- https://www.w3schools.com/howto/howto_js_rangeslider.asp -->
            <div class="sliders">
                <div class="slider" id="streams">
                    <input type="range" min="0" max="100">
                    <p>Streams: <span>50%</span></p>
                </div>
                <div class="slider" id="awards">
                    <input type="range" min="0" max="100">
                    <p>Awards: <span>10%</span></p>
                </div>
                <div class="slider" id="sales">
                    <input type="range" min="0" max="100">
                    <p>Record Sales: <span>20%</span></p>
                </div>
                <div class="slider" id="opinion">
                    <input type="range" min="0" max="100">
                    <p>Public Opinion: <span>20%</span></p>
                </div>
            </div>
            <p class="total">
                Total Percentage: <span id="total">100%</span>
            </p>
        </div>

JavaScript:

let elements = {
    streams: {
        element: document.getElementById("streams"),
        weight: 50,
    },
    awards: {
        element: document.getElementById("awards"),
        weight: 10,
    },
    sales: {
        element: document.getElementById("sales"),
        weight: 20,
    },
    opinion: {
        element: document.getElementById("opinion"),
        weight: 20,
    }
}

//get total slider weights
let getTotalWeight = () => {
    return parseInt(elements.streams.weight) +
    parseInt(elements.awards.weight) +
    parseInt(elements.sales.weight) +
    parseInt(elements.opinion.weight);
}

//initilize slider potions
elements.streams.element.firstChild.nextSibling.value = elements.streams.weight;
elements.awards.element.firstChild.nextSibling.value = elements.awards.weight;
elements.sales.element.firstChild.nextSibling.value = elements.sales.weight;
elements.opinion.element.firstChild.nextSibling.value = elements.opinion.weight;

elements.streams.element.firstChild.nextSibling.oninput = () => {
    const old = elements.streams.weight;
    elements.streams.weight = elements.streams.element.firstChild.nextSibling.value;

    if (getTotalWeight() > 100) {
        elements.streams.weight = old;
        elements.streams.element.firstChild.nextSibling.value = old;
    } else {
        elements.streams.element.lastChild.previousElementSibling.lastChild.innerHTML = elements.streams.weight + "%";
        document.getElementById("total").innerHTML = getTotalWeight() + "%"
    }
}

(i’ve only written the code for the ‘streams’ slider. and also, the intended final effect, if it’s helpful, is for the user to be able to create a custom weight of four categories, that dosen’t exceed 100%)