Neolithic Programming Machine

    webrouk-custom-number

    1.0.2 • 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.

    Install

    npm i webrouk-custom-number

    DownloadsWeekly Downloads

    88

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    11.2 kB

    Total Files

    5

    Last publish

    Collaborators

    • muhammad_mabrouk