I made a range slider using html/css/js to go with my lua nui. It works great for the most part, but whenever I slide too quickly on the slider, it doesn't perform the function correctly. Whenever I slide my slider to the left, it makes certain values go down and up for the right. If I slide it too crazy, the values all go back to 0, so I figured if I could cap the speed at which the user can slide it, the function would never go wrong. Didn't find any relevant google searches for this, so I'd appreciate any replies. Also, I'm new to sliders so give me a break if this is a really dumb quesion. I'm more familiar with lua.

the html

<div class="slidecontainer" style="position: fixed;top:13%;left:5%;">
 <input type="range" min="0.0" max="10.0" value="5.0" class="slider" id="myRange">
</div>

the js

 var slider = document.getElementById("myRange");
 slider.oninput = function() {
        if (slider.value >= 0.0 && slider.value < 1.0) {
            $.post('https://skineditor/changefaceshapemix', JSON.stringify({
                value: '1-10'
            }));
        } else if (slider.value > 1.0 && slider.value < 2.1) {
            $.post('https://skineditor/changefaceshapemix', JSON.stringify({
                value: '11-20'
            }));
// this keeps on going all the way to 10 (also i know that the string values are different)

how i have it right now is if the slider's value is anywhere between the numbers then it posts back to my lua and does a function

im not showing the lua because i've verified its not an issue with that code, my function only goes wrong if i slide too quick on the slider