Illustration of Max/Min bug for jQuery UI Spinner 2, v1.9m6
Spinner has trouble with extreme min and max values (Ex: max: 79228162514264337593543950335, min: -79228162514264337593543950335). When clicking on the spinner with these extremes, it will not step. The problem seems to lie in the _adjustValue method and how it is handling the rounding of the floating point values.
HTML
<link rel="stylesheet" href="http://view.jqueryui.com/master/themes/base/jquery.ui.all.css">
<script src="http://view.jqueryui.com/master/ui/jquery.ui.core.js"></script>
<script src="http://view.jqueryui.com/master/ui/jquery.ui.widget.js"></script>
<script src="http://view.jqueryui.com/master/ui/jquery.ui.button.js"></script>
<script src="http://view.jqueryui.com/master/ui/jquery.ui.spinner.js"></script>
<script src="http://view.jqueryui.com/master//external/globalize.js"></script>
<p style="font-family: Tahoma; font-size: .875em; margin: 2em 0 .5em">Both of the spinner's shown are set with the extreme max and min values. When set with these extreme Max and Min values, the spinner's _adjustValue method seems to break down, resulting in the spin's failure.</p>
<input type="text" class="decimalSpinner" value="0" />
<input type="text" class="integerSpinner" value="0" />
<p style="font-family: Tahoma; color: #666; font-size: .875em; margin: 2em 0 .5em"><strong>Note:</strong> I tried to correct this by changing the _adjustValue method to the code shown below, and while this does allow the spinner to spin, it breaks other unit tests. Still working on a better fix as of this demo creation...</p>
<pre style="font-family: Courier, sans-serif; color: green; font-size: .67em">
<code>
_adjustValue: function (value) {
var base, aboveMin,
options = this.options;
// make sure we're at a valid step
// - find out where we are relative to the base (min or 0)
base = options.min !== null ? options.min : 0;
// - round to the nearest step
value = Math.round(value / options.step) * options.step;
// fix precision from bad JS floating point math
value = parseFloat(value.toFixed(this._precision()));
// clamp the value
if (options.max !== null && value > options.max) {
return options.max;
}
if (options.min !== null && value < options.min) {
return options.min;
}
return value;
},
</code></pre>
JavaScript
$(document).ready(function() {
$(".decimalSpinner").spinner({
culture: "en-US",
numberFormat: "n2",
max: 10,
min: -10,
page: 10,
step: 0.1
});
$(".integerSpinner").spinner({
culture: "en-US",
max: 79228162514264337593543950335,
min: -79228162514264337593543950335,
page: 10,
step: 1
});
});