InputNumber Overview

The InputNumber control allows users to enter and edit numbers. It has the following advantages over regular input elements:

1. Users cannot enter non-numeric values at all.
2. You can use the format property to format the number as it is edited, making it easy to read. The format string is expressed as a .NET-style standard numeric format string.
3. You can use the min and max properties to specify the valid range of values (users will not be able to enter values outside this range).
4. You can use the step property to specify an increment that is added to the value when the user clicks the increment/decrement buttons on the control.

You may refer to the demos which provides examples for these properties.

By default, InputNumber values are required, so you cannot delete the entire content of the control. If you want to delete all the content from the control and make it empty then set the isRequired property to false.

HTML

  <input id="theNumber">

Javascript

import * as input from '@grapecity/wijmo.input';

function init() {
    // a regular input number
    let theNumber = new input.InputNumber('#theNumber', {
      min: 0,
      max: 100,
      step: 10,
      placeholder: 'Your age (optional)'
    });    
}