dile-number-picker

Web Component for selecting integer numbers. Provides an input with buttons to increment/decrement the value and allows configuration for step, min, max, leading zeros formatting and digits display.

<dile-number-picker></dile-number-picker>

This component is based on another component called dile-number-picker-element, which is not currently documented. However, it might be useful if you need a more minimalistic input without labels or messages, for example, when integrating it as a data entry interface within other components.

Installation

npm i @dile/ui

Usage

Import the component.

import '@dile/ui/components/number-picker/number-picker.js';

Use the component.

<dile-number-picker
  value="10"
  step="5"
  min="0"
  max="100"
  digits="3"
  leadingZeros
></dile-number-picker>

Properties

• value: The current value of the input.
• step: Defines the increment/decrement step. Default is 1.
• min: Minimum allowed value. If no value is provided for this property, no minimum value will be enforced.
• max: Maximum allowed value. If no value is provided for this property, no maximum value will be enforced.
• digits: Number of digits to display (used with leadingZeros).
• leadingZeros: If true, the value will be formatted with leading zeros up to the defined digits.
• disabled: Disables the component and prevents user interaction.
• focusOnStart: When true, the input will get focus automatically after rendering.
• name: Name for the input to use in the form submits.
• label: Label displayed.
• message: Message displayed.
• errored: When errored is set to true the component shows an error state.
• hideErrorOnInput: Removes error state when the user interacts with the element changing it's value.

Methods

• focus(): Focuses the input element.
• clear(): Clears the value and sets to 0.
• clearError(): Clears the errored state.

Events

• dile-number-picker-value-changed: Dispatched when the value changes. The event detail contains the new value (Number).

numberPicker.addEventListener('dile-number-picker-value-changed', (e) => {
  console.log('New value:', e.detail);
});

• element-changed: The element-changed event is dispatched when value on the input changes. In the event detail will emmit the element name and valueproperties.

Styling

dile-number-picker demos

Regular component

<script type="module">
  import '@dile/ui/components/number-picker/number-picker.js';
</script>
<dile-number-picker></dile-number-picker>

Disabled component

<dile-number-picker disabled></dile-number-picker>

Leading zeros

<dile-number-picker leadingZeros value="6"></dile-number-picker>

3 digits with leading zeros and step 10

<dile-number-picker digits="3" leadingZeros step="10"></dile-number-picker>

3 digits with step 50 and focus on start

<dile-number-picker focusOnStart digits="3" step="50"></dile-number-picker>

Min 3 max 6

<dile-number-picker min="3" max="6"></dile-number-picker>

Min 0 max 24 with leading zeros and step 5

<dile-number-picker min="0" max="24" leadingZeros step="5" digits="2"></dile-number-picker>