Example of Creating the NumberEdit Component

Add links to the following files in the HEAD tag to execute the example:

Library of the PP.js basic components.
PP.css visual styles.

Add the script to create the NumberEdit component in the SCRIPT tag:

<script text="text/javascript">
    function Ready()   {
    NE = new PP.Ui.NumberEdit({//Create an instance of the NumberEdit component
        ParentNode: document.getElementById("NE1"),//Identifier contained in the div tag
        Width: "250px",
        Height: "50px",
        Step: 10,//Value change step
        EnableGroupSeparator: true,// Separation by groups
        DecimalSeparator: ".",//Decimal separator
        GroupSeparator: ",",//Thousands separator
        MinValue: 0,//Minimum value
        MaxValue: 10000,//Maximum value
        FractionCount: 2,//Number of digits after decimal separator
        Walkthrough: true,//Recurrence is determined
        IsNullable: true //Display empty input field
    });
    NE.setFocus();//Set component focus
    };
</script>

The BODY tag must contain a DIV element with the NE1 identifier.

<body onload="Ready()">
    <div id="NE1"></div>
</body>

After executing the example the HTML page will contain a value editor that looks as follows:

On clicking the Up/Down buttons or scroll button the property changes by 10 (the Step property).

A value between 0 and 10000 can be set in the editor box. If an invalid value is entered, an indicator of incorrect input signals it.

If the minimum value is set, on clicking the bottom scroll button or the Down key, maximum value sets in the editor box, and further scrolling downwards decreases the value by ten. This happens because the Walkthrough property is set to true.