number-input - Vaadin Add-on Directory

Name: number-input
Availability: InStock
Rating: 5.0 (134 reviews)
Author: fooloomanzoo

input for numeric values

[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/number-input.svg)](https://www.npmjs.com/package/@fooloomanzoo/number-input) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/number-input) _[API & Demo](https://fooloomanzoo.github.io/number-input)_ ## \ An input for numeric values. ### Motivation The normal `input` with `type="number"` is fairly good to use, but it has some flaws, because it should if wanted e.g.: * prevent non numeric input * guarantee **live**-data to be valid * use the local decimal separator * pad a value with `0` (to a specific length) * size the input (according to it's length) * overflow to minimum or underflow to maximum * saturate to minimum or to maximum * display a specified unit * display a specified currencies * can use percentage values and do have automatically the correct decimal value This element wants to achieve that, by using the [Intl.NumberFormat API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat). A more simpler element \ just uses integer values and doesn't use units or percent values. ![img](https://github.com/fooloomanzoo/number-input/raw/master/docs/number-input.gif "Demo") ### Example ```html using units:

in percent:

using currencies:

as integer: ``` ### Styling Have a look at [input-picker-pattern#input-shared-style](https://github.com/fooloomanzoo/input-picker-pattern#input-shared-style) to see how to style the element. ### Installation ``` npm i @fooloomanzoo/number-input ``` ### License [MIT](https://github.com/fooloomanzoo/number-input/blob/master/LICENSE.txt)

Issue tracker
Documentation
View on GitHub
Online Demo
View on NPM
GitHub Homepage

number-input version 1.0.0
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.1
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.2
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.3
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.4
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.5
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.6
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.7
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.8
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.9
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.0.12
### Dependencies

number-input version 1.0.13
### Dependencies

number-input version 1.1.3
### Dependencies * polymer#Polymer/polymer#1.9 - 2

number-input version 1.1.4
### Dependencies

number-input version 1.1.5
### Dependencies

number-input version 1.1.6
### Dependencies

number-input version 1.1.7
### Dependencies

number-input version 1.1.8
### Dependencies

number-input version 1.1.10
### Dependencies

number-input version 1.2.0
### Dependencies * polymer#Polymer/polymer * range-input#fooloomanzoo/range-input

number-input version 1.2.1
### Dependencies * polymer#Polymer/polymer * range-input#fooloomanzoo/range-input

number-input version 1.2.2
### Dependencies * polymer#Polymer/polymer * range-input#fooloomanzoo/range-input

number-input version 1.2.3
### Dependencies * polymer#Polymer/polymer * range-input#fooloomanzoo/range-input

number-input version 1.2.4
### Dependencies

number-input version 1.2.5
### Dependencies

number-input version 1.2.6
### Dependencies * polymer#Polymer/polymer * property-mixins#fooloomanzoo/property-mixins

number-input version 1.2.7
### Dependencies

number-input version 1.2.8
### Dependencies

number-input version 1.2.9
### Dependencies

number-input version 1.3.0
### Dependencies * polymer#Polymer/polymer * property-mixins#fooloomanzoo/property-mixins

number-input version 1.3.1
### Dependencies

number-input version 1.3.2
### Dependencies

number-input version 1.3.3
### Dependencies

number-input version 1.3.4
### Dependencies

number-input version 1.3.5
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#1.0.13 * input-picker-pattern#fooloomanzoo/input-picker-pattern#1.0.15

number-input version 2.0.0
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#1.0.13 * input-picker-pattern#fooloomanzoo/input-picker-pattern#1.0.15

number-input version 2.0.2
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.0.1
### Dependencies

number-input version 2.0.3
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.0.4
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.0.5
### Dependencies

number-input version 2.0.6
### Dependencies

number-input version 2.0.7
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.0.8
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.0.9
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.0
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.0.1
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.1
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.2
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.3
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.4
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.5
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.6
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.7
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.8
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.1.9
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.1.10
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.2.0
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.2.1
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.2.2
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.2.3
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.2.4
### Dependencies * polymer#Polymer/polymer#2 * property-mixins#fooloomanzoo/property-mixins#2 * input-picker-pattern#fooloomanzoo/input-picker-pattern#2

number-input version 2.2.5
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.2.6
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.2.7
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.2.8
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.2.9
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.0
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.1
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/text-input#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.2
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/text-input#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.3
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.4
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.5
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.6
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.7
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.8
### Dependencies * @polymer/polymer#^2 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.10
### Dependencies * @polymer/polymer#^2.6.1 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 2.3.9
### Dependencies * @polymer/polymer#^2.6.1 * @fooloomanzoo/input-picker-pattern#^2 * @fooloomanzoo/property-mixins#^2

number-input version 3.0.0
### Dependencies * @polymer/polymer#^3 * @fooloomanzoo/input-picker-pattern#^3 * @fooloomanzoo/property-mixins#^3

number-input version 3.0.1
### Dependencies * @fooloomanzoo/input-picker-pattern#^3 * @fooloomanzoo/property-mixins#^3 * @polymer/polymer#^3

number-input version 3.0.2
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.4 * @fooloomanzoo/property-mixins#^3 * @polymer/polymer#^3

number-input version 3.0.3
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.7 * @fooloomanzoo/property-mixins#^3.0.6 * @polymer/polymer#^3

number-input version 3.0.4
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.8 * @fooloomanzoo/property-mixins#^3.0.7 * @polymer/polymer#^3

number-input version 3.0.5
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.8 * @fooloomanzoo/property-mixins#^3.0.8 * @polymer/polymer#^3

number-input version 3.0.6
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.8 * @fooloomanzoo/property-mixins#^3.0.9 * @polymer/polymer#^3

number-input version 3.0.7
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.8 * @fooloomanzoo/property-mixins#^3.0.9 * @polymer/polymer#^3

number-input version 3.0.8
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.8 * @fooloomanzoo/property-mixins#^3.0.9 * @polymer/polymer#^3

number-input version 3.0.9
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.8 * @fooloomanzoo/property-mixins#^3.0.9 * @polymer/polymer#^3

number-input version 3.0.10
### Dependencies * @fooloomanzoo/input-picker-pattern#^3.0.10 * @fooloomanzoo/property-mixins#^3.0.9 * @polymer/polymer#^3