JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input type="text" value="1" />

<p>
    <button class="down">stepDown</button>
    <button class="up">stepUp</button>
</p>

CSS

body {margin:10px;}

p { margin:20px 0; font:normal 10pt Arial,Sans-serif; }

JavaScript

var spinner = $("input").spinner({
    step: 4,
    min: 10,
    max: 400
});

$(".up").click(function(){
    spinner.trigger("focus");
    console.log('<<up'+spinner.spinner("value"));
    spinner.spinner( "stepUp" );
    console.log('++up'+spinner.spinner("value"));
    spinner.trigger( "spinstop" );
    console.log('>>up'+spinner.spinner("value"));
});

$(".down").click(function(){
    spinner.trigger("focus");
    console.log('<<down'+spinner.spinner("value"));
    spinner.spinner( "stepDown" );
    console.log('++up'+spinner.spinner("value"));
    spinner.trigger( "spinstop" );
    console.log('>>down'+spinner.spinner("value"));
});