uiw-input-number

A lightweight, simple-to-use circular percentage graph web component. Pass in the percentage number, with color of your choice, then uiw-input-number will handle the rest.

Demo

Since this is a web component, you can just use directly in your HTML like this To use it with other framework e.g Angular, React, Vue etc. see Framework Integrations from Stencil site.

Note

Feature custom color of your choice is still under development

Using this component

There are three strategies to use web components built with Stencil.

Script tag

• Put a script tag similar to this <script type='module' src='https://unpkg.com/uiw-input-number@<latest-version>/dist/uiw-input-number.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install uiw-input-number --save
• Put a script tag similar to this <script type='module' src='node_modules/uiw-input-number/dist/uiw-input-number.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install uiw-input-number --save
• Add an import to the npm packages import uiw-input-number;
• Then you can use the element anywhere in your template, JSX, html etc

Feedback

If you have found a bug or have another issue with the library — please create an issue.

If you have a question regarding the library or it's integration with your project — consider asking a question at StackOverflow.

Have any ideas or propositions? Feel free to develop it further. See Developer guide below.

Cheers!

Developer guide

You're welcome to make this component even more flexible, scalable and robust! Fork, clone, create a feature branch, implement your feature, cover it with tests, commit, create a PR.

npm install
npm start // run development server serving src/index.html

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Known problems/limitations

input number currently supports only integer values it is possible to manually enter fractions (for example 10.9) but the value will be still 10. That said if max value is 10 and user manually enters 10.9 it will not show error about max value

Honorable mentions

the width of input field is changing dynamicaly based on lenght of number (max width is to fix the parent container)

Support

If you like this library consider to add star on GitHub repository.

Thank you!