DevExtreme jQuery - Overview

The NumberBox is a widget that displays a numeric value and allows a user to modify it by typing in a value, and incrementing or decrementing it using the keyboard or mouse.

View Demo

The following code adds the NumberBox to your page. The simplest configuration of the widget requires only a value to be specified. In addition, you can specify the placeholder to be displayed when the number box is empty.

<div id="numberBoxContainer"></div>

$(function() {
    $("#numberBoxContainer").dxNumberBox({
        value: 20,
        placeholder: 'Enter your age'
    });
});

<dx-number-box
    [value]="20"
    placeholder="Enter your age">
</dx-number-box>

import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})

In most cases, it is useful to specify the range of possible values. For this purpose, set the min and max options.

$(function() {
    $("#numberBoxContainer").dxNumberBox({
        value: 20,
        min: 16,
        max: 100
    });
});

<dx-number-box
    [value]="20"
    [min]="16"
    [max]="100">
</dx-number-box>

import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})

If the entered value falls out of the range, the widget sets the value to the lower (if the value is less than the lower bound) or upper bound (if the value is greater than the upper bound).

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
• NumberBox - Handle the Value Change Event
• NumberBox - Control the Behavior
• NumberBox - Keyboard Support
• NumberBox API Reference