JSFiddle - React, Tailwind, and code Playground

by venkateshwar

HTML

<input type='text' id='range' data-min=1, data-max=20 value=1></input>

JavaScript

$(document).on('keypress', "#range", function (e) {
    var sel = document.getSelection();
    var keyCode = e.which || e.keyCode;
    var pressedChar = String.fromCharCode(keyCode);
    var start = sel.extentOffset;
    var end = sel.baseOffset;
    var str = this.value;

    // Then later magic!!
    var curValue = str.substr(0, start) + pressedChar + str.substr(end);
    if (/^\d+$/.test(curValue)) {
        if ($(this).data('min') > curValue || $(this).data('max') < curValue) {
            return false
        }
        return true
    } else {
        return false;
    }
})