# NumericInput

Class · extends [`InputElement`](https://api.playcanvas.com/pcui/classes/InputElement.md)

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/NumericInput/index.ts#L66

The NumericInput represents an input element that holds numbers.

NumericInput accepts `number` values. It also accepts strings that contain mathematical
expressions which are then evaluated to a number. Here are some examples:

| Input String       | Evaluated Number Value |
| ------------------ | ---------------------- |
| `"10 + 20"`        | `30`                   |
| `"10 - 20"`        | `-10`                  |
| `"10 * 20"`        | `200`                  |
| `"10 / 20"`        | `0.5`                  |
| `"10 * (20 + 30)"` | `500`                  |

By default, a NumericInput displays a slider input that can be used to quickly change the value
via a click and drag. The slider can be disabled by setting the `hideSlider` argument to `true`.

## Constructors

### constructor

```ts
new NumericInput(args?: Readonly<NumericInputArgs>)
```

Creates a new NumericInput.

**Parameters**

- `args` (`Readonly<`[`NumericInputArgs`](https://api.playcanvas.com/pcui/interfaces/NumericInputArgs.md)`>`, optional, default `{}`): The arguments.

## Accessors

### max

```ts
get max(): number
set max(value: number)
```

Gets the maximum value this field can take.

### min

```ts
get min(): number
set min(value: number)
```

Gets the minimum value this field can take.

### precision

```ts
get precision(): number
set precision(value: number)
```

Gets the precision of the input.

### step

```ts
get step(): number
set step(value: number)
```

Gets the amount that the value will be increased or decreased when using the arrow keys and the slider input.

### value

```ts
get value(): number
set value(value: string | number)
```

Gets the value of the NumericInput.

### values

```ts
set values(values: number[])
```

Sets multiple values on the input. If all values are the same, the input will display that
value. Otherwise, it will be empty and display a "multiple values" state.

## Events

### EVENT_CHANGE

```ts
static readonly EVENT_CHANGE: "change" = 'change'
```

Fired when the value of the NumericInput changes.

**Example**

```ts
const numericInput = new NumericInput();
numericInput.on('change', (value: number) => {
    console.log('Value changed to:', value);
});
```

### EVENT_SLIDER_MOUSEDOWN

```ts
static readonly EVENT_SLIDER_MOUSEDOWN: "slider:mousedown" = 'slider:mousedown'
```

Fired when the user starts dragging the slider.

**Example**

```ts
const numericInput = new NumericInput();
numericInput.on('slider:mousedown', (evt: MouseEvent) => {
    console.log('Slider drag started');
});
```

### EVENT_SLIDER_MOUSEUP

```ts
static readonly EVENT_SLIDER_MOUSEUP: "slider:mouseup" = 'slider:mouseup'
```

Fired when the user stops dragging the slider.

**Example**

```ts
const numericInput = new NumericInput();
numericInput.on('slider:mouseup', () => {
    console.log('Slider drag ended');
});
```

## Inherited from [InputElement](https://api.playcanvas.com/pcui/classes/InputElement.md)

- `blurOnEnter: boolean = true`
- `blurOnEscape: boolean = true`
- `get alignItems(): string` · `set alignItems(value: string)`
- `get alignSelf(): string` · `set alignSelf(value: string)`
- `get binding(): BindingBase` · `set binding(value: BindingBase)`
- `get class(): DOMTokenList`
- `get dom(): HTMLElement`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `get flexBasis(): string` · `set flexBasis(value: string | number)`
- `get flexDirection(): string` · `set flexDirection(value: string)`
- `get flexGrow(): string` · `set flexGrow(value: string | number)`
- `get flexShrink(): string` · `set flexShrink(value: string | number)`
- `get flexWrap(): string` · `set flexWrap(value: string)`
- `get height(): number` · `set height(value: string | number)`
- `get hidden(): boolean` · `set hidden(value: boolean)`
- `get hiddenToRoot(): boolean`
- `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)`
- `get input(): HTMLInputElement`
- `get justifyContent(): string` · `set justifyContent(value: string)`
- `get justifySelf(): string` · `set justifySelf(value: string)`
- `get keyChange(): boolean` · `set keyChange(value: boolean)`
- `get parent(): Element` · `set parent(value: Element)`
- `get placeholder(): string` · `set placeholder(value: string)`
- `get readOnly(): boolean` · `set readOnly(value: boolean)`
- `get renderChanges(): boolean` · `set renderChanges(value: boolean)`
- `get style(): CSSStyleDeclaration`
- `get tabIndex(): number` · `set tabIndex(value: number)`
- `get width(): number` · `set width(value: string | number)`
- `blur(): void`
- `flash(): void`
- `focus(select?: boolean): void`
- `link(observers: Observer | Observer[], paths: string | string[]): void`
- `unlink(): void`
- `static create<Type extends Element>(type: string, args: ElementArgs): Type`
- `static register<Type extends Element>(type: string, cls: Object, defaultArguments?: object): void`
- `static unregister(type: string): void`
- `static readonly EVENT_CLICK: "click" = 'click'`
- `static readonly EVENT_DESTROY: "destroy" = 'destroy'`
- `static readonly EVENT_DISABLE: "disable" = 'disable'`
- `static readonly EVENT_ENABLE: "enable" = 'enable'`
- `static readonly EVENT_HIDE: "hide" = 'hide'`
- `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'`
- `static readonly EVENT_HOVER: "hover" = 'hover'`
- `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'`
- `static readonly EVENT_PARENT: "parent" = 'parent'`
- `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'`
- `static readonly EVENT_SHOW: "show" = 'show'`
- `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'`

## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md)

- `get error(): boolean` · `set error(value: boolean)`