jQuery UI & Spinner: Decimal points

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

jQuery UI Spinner – Decimal

Example of a decimal spinner. Step is set to 0.01. 
The code handling the culture change reads the current spinner value, then changes the culture, then sets the value again, resulting in an updated formatting, based on the new culture.

<!doctype html>
<html lang='en'>
    <meta charset='utf-8'>
    <title>jQuery UI Spinner - Decimal</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='//jqueryui.com/resources/demos/external/globalize.js'></script>
    <script src='//jqueryui.com/resources/demos/external/globalize.culture.de-DE.js'></script>
    <script src='//jqueryui.com/resources/demos/external/globalize.culture.ja-JP.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 () {
                step: 0.01,
                numberFormat: 'n'

            $('#culture').change(function () {
                var current = $('#spinner').spinner('value');
                $('#spinner').spinner('value', current);

    <label for='spinner'>Decimal spinner:</label>
    <input id='spinner' name='spinner' value='5.06'>

    <label for='culture'>Select a culture to use for formatting:</label>
    <select id='culture'>
        <option value='en-EN' selected='selected'>English</option>
        <option value='de-DE'>German</option>
        <option value='ja-JP'>Japanese</option>

Try The Code
Series Navigation<< jQuery UI & Spinner: Overflow
jQuery UI & Spinner: Map >>

Leave a comment

Leave a Reply