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

jQuery NumberBox - 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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxNumberBox
        :value="20"
        :show-spin-buttons="true"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxNumberBox from 'devextreme-vue/number-box';

export default {
    components: {
        DxNumberBox
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import NumberBox from 'devextreme-react/number-box';

class App extends React.Component {
    render() {
        return (
            <NumberBox
                defaultValue={20}
                showSpinButtons={true} />
        );
    }
}
export default App;

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

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
    ],
    // ...
})
Vue
App.vue
<template>
    <DxNumberBox
        :value="20"
        :show-spin-buttons="true"
        :step="10"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxNumberBox from 'devextreme-vue/number-box';

export default {
    components: {
        DxNumberBox
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import NumberBox from 'devextreme-react/number-box';

class App extends React.Component {
    render() {
        return (
            <NumberBox
                defaultValue={20}
                showSpinButtons={true}
                step={10} />
        );
    }
}
export default App;
See Also