NumberInput

A custom number input web component for BIM applications. HTML tag: bim-number-input

Extends

• LitElement

Implements

• HasValue<number>
• HasName

Properties

icon?

optional icon: string

The icon property allows specifying an icon identifier to be used within the number input component, potentially for decorative or instructional purposes. Changes to this property may affect the appearance or layout of the component, depending on how the icon is used within the component's template.

Default

undefined

Examples

<bim-number-input icon="user-icon"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.icon = 'user-icon';
document.body.appendChild(numberInput);

---

label?

optional label: string

The label property is used to define a text label associated with the number input component. This label can provide context or instructions to the user. When the label property changes, the component updates to display the new label text.

Default

undefined

Examples

<bim-number-input label="Enter your age"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.label = 'Enter your age';
document.body.appendChild(numberInput);

Implementation of

HasName.label

---

max?

optional max: number

The max property defines the maximum value that can be entered in the number input component. It is used to validate the input and ensure that the value does not exceed this maximum. When the property changes, the component enforces the new maximum value.

Default

undefined

Examples

<bim-number-input max="100"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.max = 100;
document.body.appendChild(numberInput);

---

min?

optional min: number

The min property defines the minimum value that can be entered in the number input component. It is used to validate the input and ensure that the value does not go below this minimum. When the property changes, the component enforces the new minimum value.

Default

undefined

Examples

<bim-number-input min="0"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.min = 0;
document.body.appendChild(numberInput);

---

name?

optional name: string

The name property is used to specify the name of the number input component. This can be useful for identifying the component in forms or JavaScript. When the property changes, it updates the component's attribute to reflect the new name.

Default

undefined

Examples

<bim-number-input name="age"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.name = 'age';
document.body.appendChild(numberInput);

Implementation of

HasName.name

---

onValueChange

readonly onValueChange: Event

Deprecated

Storing a reused Event instance is an anti-pattern. Listen for the "change" event on the element instead: el.addEventListener("change", fn).

Implementation of

HasValue . onValueChange

---

pref?

optional pref: string

Short for "prefix" — a currency symbol, unit, or other text shown inside the input field before the value (e.g. pref="$" renders "$ 42"). Named pref (not prefix) because prefix collides with the native, read-only Node.prefix (XML namespace prefix) property inherited from HTMLElement.

Default

undefined

Examples

<bim-number-input pref="$"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.pref = '$';
document.body.appendChild(numberInput);

---

sensitivity?

optional sensitivity: number

The sensitivity property affects how sensitive the slider is to mouse movements when adjusting the value. A higher sensitivity means smaller movements are needed to change the value. This property is particularly relevant when the slider property is enabled. Changes to this property adjust how the slider responds to input.

Default

undefined

Examples

<bim-number-input sensitivity="10"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.sensitivity = 10;
document.body.appendChild(numberInput);

---

slider

slider: boolean = false

The slider property enables a slider interface for the number input component, allowing users to adjust the value by dragging the slider. When enabled, it changes the component's UI to include a slider. When the property changes, the component toggles between a regular input field and a slider view.

Default

false

Examples

<bim-number-input slider></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.slider = true;
document.body.appendChild(numberInput);

---

step?

optional step: number

The step property determines the amount by which the value should increase or decrease when the user interacts with the component's stepping mechanism (dragging the slider, or pressing the Up/Down arrow keys while focused). It is used for incremental changes to the value. When the property changes, the step size for value changes is updated.

Default

undefined

Examples

<bim-number-input step="5"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.step = 5;
document.body.appendChild(numberInput);

---

suffix?

optional suffix: string

The suffix property is used to specify a suffix for the value in the number input component. Similar to the pref property, but the suffix is displayed after the value. It could be a unit of measure, a percentage symbol, etc. When the property changes, the displayed suffix updates accordingly.

Default

undefined

Examples

<bim-number-input suffix="%"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.suffix = '%';
document.body.appendChild(numberInput);

---

vertical

vertical: boolean = false

The vertical property indicates whether the slider (if enabled) should be displayed vertically. This can affect the layout and behavior of the slider component within the number input. When the property changes, the orientation of the slider adjusts accordingly.

Default

false

Examples

<bim-number-input vertical></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.vertical = true;
document.body.appendChild(numberInput);

---

styles

static styles: CSSResult

CSS styles for the component.

Overrides

LitElement.styles

Accessors

value

set value(data): void

The value property represents the current value of the number input component. It is a crucial property that holds the actual number input by the user or set programmatically. Changes to this property update the displayed value in the component and can trigger validation against the min and max properties if they are set.

Default

0

Examples

<bim-number-input value="10"></bim-number-input>

const numberInput = document.createElement('bim-number-input');
numberInput.value = 10;
document.body.appendChild(numberInput);

Parameters

Parameter	Type
data	number

Methods

focus()

focus(options?): void

Sets focus to the input element of the number input component. This method is useful for programmatically focusing the input element, for example, in response to a user action or to emphasize the input in the UI.

If the input element reference is not available (not yet rendered or disconnected), this method will do nothing.

Parameters

Parameter	Type
options?	FocusOptions

Returns

void

Overrides

LitElement.focus