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

Installation

Use NPM to download and install it directly in to your project

$ npm install webrouk-custom-number --save

or include js file manually

<!-- webrouk-custom-number component file -->
<script src="webrouk-custom-number.js"></script>

Usage

Using webroukCustomNumber is simple. Configuration over attributes.

<webrouk-custom-number min="0" max="100" step="10" value="30">
  <!-- This input will receive the value from the component -->
  <input type="hidden">
</webrouk-custom-number>

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:

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. It can be used for free and without any attribution, in any personal or commercial project.