number-input
input for numeric values
<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. A more simpler element <integer-input> just uses integer values and doesn't use units or percent values.
Example
<span>using units: </span><number-input min="-150" step="0.15" max="300" pad-length="3" default="15" unit="°C"></number-input><br>
<span>in percent: </span><number-input min="-1" step="0.15" max="3" start-at="1" default="1" number-style="percent"></number-input><br>
<span>using currencies: </span><number-input min="0" step="0.01" always-sign start-at="1000" default="1000" use-grouping number-style="currency" currency="EUR"></number-input><br>
<span>as integer: </span><integer-input min="-150" step="15" max="300" default="15"></integer-input>
Styling
Have a look at input-picker-pattern#input-shared-style to see how to style the element.
Installation
npm i @fooloomanzoo/number-input
License
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @fooloomanzoo/input-picker-pattern#^3.0.10
- @fooloomanzoo/property-mixins#^3.0.9
- @polymer/polymer#^3
- Released
- 2018-11-16
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 1.0+
- Polymer 3.0+
- Polymer 2.0+ in 2.3.9
- Browser
- Browser Independent