https://github.com/fooloomanzoo/number-input

input for numeric values
https://github.com/fooloomanzoo/number-input

input number polymer stepper webcomponents

Last synced: 12 months ago
JSON representation

input for numeric values

• Host: GitHub
• URL: https://github.com/fooloomanzoo/number-input
• Owner: fooloomanzoo
• License: mit
• Created: 2017-09-12T18:45:18.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-11-16T22:29:28.000Z (over 7 years ago)
• Last Synced: 2025-03-17T22:58:05.833Z (over 1 year ago)
• Topics: input, number, polymer, stepper, webcomponents
• Language: HTML
• Size: 924 KB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
[![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)