JSFiddle - React, Tailwind, and code Playground

HTML

<input type="number" min="1.01" max="1000" id="num"/>
<button class="increment">+</button>
<button class="decrement">-</button>

JavaScript

$('.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 = 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;
}