I am not super good at this and only using half my brain, but I did my best attempt to convert this to vanilla JavaScript and get seemingly odd results.

    <!DOCTYPE html>
    
    <input type="number" id="progress" class="form-control mr-0 pr-0" placeholder="Progress (%)" />
    
    <script>
    document.getElementById('progress').addEventListener('change', function() {
        console.log("fired!");

        // Remove any non-numeric.
        let val = this.value.replace(/[^0-9.]/g, '');
    
        // Only one decimal point.
        let parts = val.split('.');
        if (parts.length > 2) {
            val = parts[0] + '.' + parts.slice(1).join('');
        }
    
        let numVal = parseFloat(val) || 0;
    
        if (numVal > 100) {
            numVal = 100;
        } else if (numVal < 0) {
            numVal = 0;
        }
    
        this.value = numVal === 0 ? '' : numVal;
    });
    </script>

Someone educate me, especially if I am off base or the code is inherently incorrect.