Overview of IntegralUI NumericUpDown

IntegralUI NumericUpDown is a native web component for Angular, React and Vue that displays a numeric value and allows you to change it within a range of defined minimum and maximum values. In this article, you will find general information about the color picker component, including its properties, events and methods that you can use.

In this example, you can choose the display mode of the Numeric component. There are three options:

• InBound - default option, arrow buttons appear after the input box close to each other
• LeftRight - arrow buttons appear on left and right side with input box in the middle
• UpDown - arrow buttons appear above and below the input box

Using the arrow buttons you can increase or decrease the numeric value within the specified range of min and max values. Bu default min is set to 0 and max is set to 100.

You can also change the numeric value with mouse wheel.

How to Use IntegralUI NumericUpDown in Angular, React and Vue

To use the NumericUpDown component you need to do the following:

• In app template place the button component using the iui-numeric-updown tag name
• Set values for different properties available
• Handle the component events in your code

• JavaScript
• Angular
• React
• Vue

public ctrlDisplayMode: IntegralUINumericDisplayMode = IntegralUINumericDisplayMode.InBound;
public ctrlValue: number = 30;
                                    

<iui-numeric-updown [(ngModel)]="ctrlValue" [displayMode]="ctrlDisplayMode"></iui-numeric-updown>
                                    

By default, NumericUpDown component shows the input box on left followed by up and down arrow buttons on the right side. You can increase or decrease the numeric value by clicking on the arrow buttons or using the mouse wheel. The range of numeric value is determined by the min and max properties, which by default are set to 0 and 100 accordingly. You can change this in your code:

• JavaScript
• Angular
• React
• Vue

<iui-numeric-updown [(ngModel)]="ctrlValue" [min]="25" [max]="300"></iui-numeric-updown>
                                    

Color Picker as Part of Other Components

NumericUpDown component is also usable as part of other components. For example, you can add a numeic editor to cells in the Grid or TreeGrid component.

IntegralUI NumericUpDown - Available Properties, Events and Methods

Supported Properties

You can use the following properties to change the appearance and behavior of the NumericUpDown component:

• allowAnimation - Determines whether component appearance is animated or not
• accelerator - Specifies the factor by which the value changes when up/down buttons are pressed, default is 0
• controlStyle - Specifies an object that contains all style settings for the component
• data - Specifies an object that holds data related to the component
• enabled - Determines whether the component is enabled or disabled
• min - Specifies the minimum value
• max - Specifies the maximum value
• mouseWheelSpeed - Specifies the scrolling speed of the mouse wheel
• name - Uniquely identifies the component
• displayMode - Determines the layout of the component
• size - Specifies the component width and height in pixels.
• state - Specifies the component state: disabled, hovered, etc.
• step - Specifies the number by which numeric value increases or decreases
• value - Holds the current numeric value

Using the above properties, you can customize the NumericUpDown component in a way best suited for your application.

Supported Events

Here is a list of available events:

• displayModeChanged - occurs when displayMode property changes
• enabledChanged - occurs when component is enabled or disabled
• sizeChanged - occurs when component size changes
• stateChanged - occurs when component state changed: disabled, normal, hovered, selected
• valueChanged - occurs when a input text changes or an option is selected from a dropdown list

When the numeric value changes, the valueChanged event is fired. You can handle this event in your code and add specific action based on the event data.

• JavaScript
• Angular
• React
• Vue

numericValueChanged(e: any){
    console.log("Numeric value changes to: ", e.value);
}
                                    

<iui-numeric-updown [(ngModel)]="ctrlValue" (valueChanged)="numericValueChanged($event)"></iui-numeric-updown>
                                    

Supported Methods

The following public methods are available:

• decreaseValue - decreases the numeric value by amount specified in the step property
• increaseValue - increases the numeric value by amount specified in the step property
• updateLayout - updates the component layout

Using these methods, you can manually change the numeric value from code.

How to Customize the NumericUpDown Appearance

The appearance of NumericUpDown component is determined by a set of CSS classes. Using the controlStyle property, you can override these classes by providing your own. This property can accept an object in following format:

numericCtrlStyle = {
    general: {
        disabled: 'iui-numeric-disabled',
        focused: 'iui-numeric-focused',
        normal: 'iui-numeric',
        hovered: 'iui-numeric-hovered',
        selected: 'iui-numeric-selected'
    },
    content: {
        disabled: 'iui-numeric-content-disabled',
        focused: 'iui-numeric-content-focused',
        normal: 'iui-numeric-content',
        hovered: 'iui-numeric-content-hovered',
        selected: 'iui-numeric-content-selected'
    }
}
                    

Conclusion

IntegralUI NumericUpDown is a web component that you can use in Angular, React and Vue. It displays a numeric value and allows you to change it within a specified range of min/max values. You can customize the component appearance and behavior using different properties and CSS styles.

The numeric component is also usable as part of other components or in Angular Forms.

The NumericUpDown component is part of IntegralUI Web.