JSFiddle - React, Tailwind, and code Playground
HTML
<p>
<input id="hours" name="value" value=0 size=3/>
<input id="minutes" name="value" value=0 size=2/>
<input id="seconds" name="value" value=10 size=2/>
</p>
JavaScript
$(function () {
$('#seconds').spinner({
spin: function (event, ui) {
if (ui.value >= 60) {
$(this).spinner('value', ui.value - 60);
$('#minutes').spinner('stepUp');
return false;
} else if (ui.value < 0) {
$(this).spinner('value', ui.value + 60);
$('#minutes').spinner('stepDown');
return false;
}
}
});
$('#minutes').spinner({
spin: function (event, ui) {
if (ui.value >= 60) {
$(this).spinner('value', ui.value - 60);
$('#hours').spinner('stepUp');
return false;
} else if (ui.value < 0) {
$(this).spinner('value', ui.value + 60);
$('#hours').spinner('stepDown');
return false;
}
}
});
$('#hours').spinner({
min: 0});
});