JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" value="0">
JavaScript
$("input").spinner({
max: 1000,
min: -1000
}).on('input', function () {
if ($(this).data('onInputPrevented')) return;
var val = this.value,
$this = $(this),
max = $this.spinner('option', 'max'),
min = $this.spinner('option', 'min');
// We want only number, no alpha.
// We set it to previous default value.
if (!val.match(/^[+-]?[\d]{0,}$/)) val = $(this).data('defaultValue');
this.value = val > max ? max : val < min ? min : val;
}).on('keydown', function (e) {
// we set default value for spinner.
if (!$(this).data('defaultValue')) $(this).data('defaultValue', this.value);
// To handle backspace
$(this).data('onInputPrevented', e.which === 8 ? true : false);
});