jQuery UI & Spinner: Overflow

This entry is part 4 of 6 in the series jQuery UI Spinner

jQuery UI Spinner – Overflow

Overflowing spinner restricted to a range of -10 to 10. For anything above 10, it’ll overflow to -10, and the other way round.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Overflow</title>
    <link rel='stylesheet' href='//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
    <script src='//jqueryui.com/resources/demos/external/jquery.mousewheel.js'></script>
    <script src='//code.jquery.com/ui/1.10.4/jquery-ui.js'></script>
    <link rel='stylesheet' href='http://codecrawl.com/code/jqueryui/jqueryui_style.css'>
        $(function () {
                spin: function (event, ui) {
                    if (ui.value > 10) {
                        $(this).spinner('value', -10);
                        return false;
                    } else if (ui.value < -10) {
                        $(this).spinner('value', 10);
                        return false;

    <label for='spinner'>Select a value:</label>
    <input id='spinner' name='value'>


Try The Code

Series Navigation<< jQuery UI & Spinner: Currency
jQuery UI & Spinner: Decimal points >>

Leave a comment

Leave a Reply