changing bg color on min and max

Question

I want to change color of button-down and button-up when spinner have min or max value to red

<input type="hidden" name="id" value="<?= $this->product->getId() ?>" />
<input name="quantity" value="1" readonly/>

<script type="text/javascript">
    $(document).ready(function () {
        $('input[name="quantity"]').spinner({
            min: 1,
            max: <?= $this->product->getQuantity() ?>,
        }).keydown(function (e) {
            e.preventDefault();
        });
    });
</script>

Answer 1

You can apply a change method which jquery ui spinner provides:

    $('input[name="quantity"]').spinner({
        min: 1,
        max: <?= $this->product->getQuantity() ?>,
        spin:function(event, ui){
           $(this).closest('.ui-spinner').find('a.ui-spinner-button').css('background', function(){
             this.value == 1 ? return 'red' : return '#e6e6e6';
           });
        }
    }).keydown(function (e) {
        e.preventDefault();
    });