webrouk-custom-number

1.0.3 • Public • Published

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.

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i webrouk-custom-number

      Weekly Downloads

      1

      Version

      1.0.3

      License

      MIT

      Unpacked Size

      11.3 kB

      Total Files

      5

      Last publish

      Collaborators

      • webrouk