All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - Control the Behavior

If you need to add spin buttons to the NumberBox, set the showSpinButtons to true.

jQuery
JavaScript
$(function() {
    $("#numberBoxContainer").dxNumberBox({
        value: 20,
        showSpinButtons: true
    });
});
Angular
HTML
TypeScript
<dx-number-box
    [value]="20"
    [showSpinButtons]="true">
</dx-number-box>
import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})

To specify the step by which the value is changed, use the step option.

jQuery
JavaScript
$(function() {
    $("#numberBoxContainer").dxNumberBox({
        value: 20,
        showSpinButtons: true,
        step: 10
    });
});
Angular
HTML
TypeScript
<dx-number-box
    [value]="20"
    [showSpinButtons]="true"
    [step]="10">
</dx-number-box>
import { DxNumberBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxNumberBoxModule
    ],
    // ...
})
See Also