Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/muhammadmabrouk/webrouk-custom-number
Webrouk Custom Number is a lightweight native JavaScript web component for custom input number.
https://github.com/muhammadmabrouk/webrouk-custom-number
Last synced: about 2 months ago
JSON representation
Webrouk Custom Number is a lightweight native JavaScript web component for custom input number.
- Host: GitHub
- URL: https://github.com/muhammadmabrouk/webrouk-custom-number
- Owner: MuhammadMabrouk
- License: mit
- Created: 2022-03-22T19:45:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-23T22:44:02.000Z (about 1 year ago)
- Last Synced: 2024-11-15T23:28:04.661Z (about 2 months ago)
- Language: JavaScript
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webroukCustomNumber
Webrouk Custom Number is a lightweight native JavaScript web component for custom input number.
- No dependencies.
- Small and fast.
- Writes its value right into input value field. This makes it easy to use in any html form.
### Demo
---
[CodePen Example](https://codepen.io/muhammad_mabrouk/full/QWaKPQE/)
### Installation
---
Use [NPM](https://www.npmjs.com/package/webrouk-custom-number/) to download and install it directly in to your project
```sh
$ npm install webrouk-custom-number --save
```
or include js file manually
```html
```
### Usage
---
Using webroukCustomNumber is simple. Configuration over attributes.
```html
```
### Options
| Option | Type | Description | Default |
| ----------- | :----: | ----------- | :----: |
| min | `number` | Specifies the minimum value allowed | `0` |
| max | `number` | Specifies the maximum value allowed | `null` |
| step | `number` | Specifies the legal number intervals | `1` |
| value | `number` | Specifies the default value | `min` | `0` |
| percent | `boolean` | Whether or not to show the percentage display | `false` |
| disabled | `boolean` | Specifies the disabled state of the input | `false` |
### Styleable Component Parts
---
- root
- input
- btn btn-up
- btn btn-down
#### Example:
```css
webrouk-custom-number::part(root) {
position: relative;
}
webrouk-custom-number::part(input) {
display: block;
height: 44px;
width: 100%;
text-align: center;
padding: 0 44px;
}
webrouk-custom-number::part(btn) {
position: absolute;
top: 0;
bottom: 0;
height: 44px;
width: 44px;
background-color: blue;
color: white;
}
webrouk-custom-number::part(btn-up) {
right: 0;
}
webrouk-custom-number::part(btn-down) {
left: 0;
}
```
### License
-------
webroukCustomNumber is licensed [MIT](https://choosealicense.com/licenses/mit/).
It can be used for free and without any attribution, in any personal or commercial project.