JSFiddle - React, Tailwind, and code Playground

by alexdickson

HTML

<input type="text" id="your-number-input" value="5" />

JavaScript

var input = document.getElementById('your-number-input'),
        lowerBound = 0,
        upperBound = 10;
    
    input.onkeyup = function(event) {
        event.preventDefault();
        
        var value = parseInt(input.value, 10),
            keyCode;
    
        if (isNaN(value)) {
            value = 0;
        }
        
        if (window.event) {
            keyCode = event.keyCode
        } else if (event.which) {
            keyCode = event.which
        }
        
        if (keyCode == 38) {
           value++;
        } else if (keyCode == 40) {
           value--;  
        }
    

    
        if (value > upperBound) {
            value = upperBound;
        } else if (value < lowerBound) {
           value = lowerBound;
        }

        input.value = value;
    }