How to set jQuery spinner max and min values?

Question

i've faced the next problem: I'm using jQuery + ajax and I want my spinner's max and min values to be set after the data is obtained from the sever. But the real situation is that when I check the element with firebug, it says, that max and min values are set and in reality they aren't, so there is no max and min values. here is some code:

...
<input type="number" id ="spinId" name="someName" step="0.5" />
...
$("#spinId").attr('min', 0.0);
$("#spinId").attr('max', parseFloat($('.someClass').text()));
...

and this .someClass is formed via ajax. also I noticed that value is set properly, i.e. $('#spinId').attr('value',ValueFromServer); works fine. so what should I do to fix it?

Answer 1

The min and max value are set when the spinner is created. To change them on the fly, use this:

// given a 'data' object from AJAX with keys 'min' and 'max':
$('#spinId').spinner('option', 'min', data.min);
$('#spinId').spinner('option', 'max', data.max);

Also keep in mind that the .attr() function can only be used to get and set attributes of DOM elements. For example, you can use it to get or set the id of a <div> or the href of an <a> element. Most jQuery plugins keep their configuration in JavaScript variables. If they do attach configuration to the DOM, they use .data().

Answer 2

You can also set options directly on different spinners without affecting the defaults. Here's working example: http://jsfiddle.net/7xj7K/4/

// give two different inputs different options without changing jquery spinner defaults
$("#spinId").spinner({min: 0, max: 10});
$("#spinId_two").spinner({min: -3, max: 53});

As you can see on jsfiddle, jQuery spinner has some issues with enforcing min/max values while clicking buttons to the right of the input. The value can than exceed min/max value but will be validated once user blur from the field. Validation works just fine when using keyboard up/down arrows so it seems like there's room for improvement for author of the plugin.