JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<input type="number" min="1.01" max="1000" id="num"/>
<button class="increment">+</button>
<button class="decrement">-</button>

<input id="spinner" />

JavaScript

$( "#spinner" ).spinner({
    min: 1.01,
    max: 1000,
    step: 0.01,
    spin: function( event, ui ) {
        event.preventDefault();
        event.stopPropagation();
        var value = this.value || ui.value;
        value = parseFloat(value);
        var step;
        if ($(event.currentTarget).hasClass('ui-spinner-up')) {
            step = getIncremantal(value);
            value = +(value + step).toFixed(2);
            $( "#spinner" ).spinner('value', value);
        } else {
            step = getDecremantal(value);
            value = +(value - step).toFixed(2);
            $( "#spinner" ).spinner('value', value);
        }
    }
});

$('.increment').on('click', function() {
    var elem = $('#num');
    var value = parseFloat(elem.val());
    var result = +(value + getIncremantal(value)).toFixed(2);
    elem.val(result);
});

$('.decrement').on('click', function() {
    var elem = $('#num');
    var value = parseFloat(elem.val());
    var result = +(value - getDecremantal(value)).toFixed(2);
    elem.val(result);
});

function getIncremantal(val) {
    var step;
    if (val < 2) {
        step = 0.01;
    } else if (val >= 2 && val < 3) {
        step = 0.02;
    } else if (val >= 3 && val < 4) {
        step = 0.05;
    } else if (val >= 4 && val < 6) {
        step = 0.1;
    } else if (val >= 6 && val < 10) {
        step = 0.2;
    } else if (val >= 10 && val < 20) {
        step = 0.5;
    } else if (val >= 20 && val < 30) {
        step = 1;
    } else if (val >= 30 && val < 50) {
        step = 2;
    } else if (val >= 50 && val < 100) {
        step = 5;
    } else if (val >= 100 && val < 1000) {
        step = 10;
    } else if (val > 1000) {
        step = null;
    }
    return step;
}

function getDecremantal(val) {
    var step;
    if (val <= 2) {
        step = 0.01;
    } else if (val > 2 && val <= 3) {
        step = 0.02;
    } else if (val > 3 && val <= 4) {
        step = 0.05;
    } else if (val > 4 && val <= 6) {
        step =...