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>stepDown</button>
    <button>stepUp</button>
</p>

CSS

body {margin:10px;}

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

JavaScript

var allowedValues = [1, 33, 77, 100, 250, 500, 888, 1000];

$('input').keydown(false).spinner({
    min: 1,
    max: 1000,
    spin: function(event, ui) {
        var currentValue = parseInt($(this).val(), 10);
        var upDown = ui.value - currentValue;
        if (!upDown) {
            return false;
        }
        var currentIndex = $.inArray(currentValue, allowedValues);
        var newIndex = currentIndex + upDown / Math.abs(upDown);
        if (newIndex < 0) {
            newIndex = 0;
        }
        else if (newIndex == allowedValues.length) {
            newIndex--;
        }
        $(this).val(allowedValues[newIndex]);
        return false;
    }
});

$('button').on('click', function(e) {
    $('input').spinner($(e.target).text());
});