Recently, I created a range slider using HTML, CSS, and JS to complement my Lua Nui. It's been working smoothly for the most part, but I've noticed an issue when sliding too quickly on the slider. As I slide it to the left, certain values fluctuate up and down to the right. Whenever I slide it too swiftly, all values reset back to 0. To prevent this from happening, I thought about setting a limit on the speed at which users can slide it to ensure the function works correctly every time. Unfortunately, my search attempts on Google didn't yield any relevant results, so I'm reaching out here for help. Keep in mind that I am new to sliders, so please bear with me if this question seems basic. My expertise lies more in Lua.
Here is the HTML code:
<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>
And here is the JavaScript code:
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 logic continues up to 10 (please note that the string values are different)
I currently have it set up to send a post request to my Lua based on the slider's value falling within certain ranges.
I'm not including the Lua code as I have confirmed that it's not causing the issue; the problem only arises when I slide the slider too quickly.