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'>
<head>
    <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='https://codecrawl.com/code/jqueryui/jqueryui_style.css'>
    <script>
        $(function () {
            $('#spinner').spinner({
                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;
                    }
                }
            });
        });
    </script>
</head>
<body>

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

</body>
</html>

Try The Code

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