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];

$.widget( "ui.spinner", $.ui.spinner, {
    _adjustValue: function( value ) {
        var i, length,
            values = this.options.values;                    
        if ( !values ) {
            return this._super( value );
        }
        
        for ( i = 0, length = values.length; i < length; i++ ) {
            if ( value === values[i] ) {
                return value;
            }
            if ( value > values[i] && value < values[i+1] ) {
                return values[i+1];
            }
        }
        return values[length-1];
    }
});
            
$('input').keydown(false).spinner({
    min: 1,
    max: 1000,
    values: allowedValues
});

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