├── .github
└── workflows
│ └── test.yml
├── .gitignore
├── .npmrc
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── docs
├── assets
│ ├── css
│ │ ├── docs.css
│ │ └── old.css
│ └── js
│ │ └── docs.js
├── dist
│ ├── input-spinner.css
│ ├── input-spinner.js
│ ├── input-spinner.min.css
│ ├── input-spinner.min.css.map
│ └── input-spinner.min.js
├── example.html
└── index.html
├── package-lock.json
├── package.json
├── src
├── input-spinner.js
└── input-spinner.less
└── tests
├── index.html
├── karma.conf.js
└── unit
└── unit.js
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: Test
2 |
3 | on: [push]
4 |
5 | jobs:
6 | run:
7 | name: Run tests
8 | runs-on: ubuntu-latest
9 |
10 | steps:
11 | - name: Clone repository
12 | uses: actions/checkout@v4
13 |
14 | - name: Setup Node.js
15 | uses: actions/setup-node@v4
16 | with:
17 | node-version: 22
18 |
19 | - name: Install npm dependencies
20 | run: npm ci
21 |
22 | - name: Run tests
23 | run: npm run test
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /dist/
3 | /*-dist.zip
4 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | ignore-prepublish=true
2 | lockfile-version=3
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | ## Important notes
4 | Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory!
5 |
6 | ### Code style
7 | Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
8 |
9 | ## Modifying the code
10 | First, ensure that you have the latest [Node.js](https://nodejs.org) and [npm](https://npmjs.com) installed.
11 |
12 |
13 | 1. Fork and clone the repo
14 | 1. Run `npm install` to install all dependencies
15 | 1. Run `npm run test`
16 |
17 | ## Submitting pull requests
18 |
19 | 1. Create a new branch, please don't work in your `master` branch directly.
20 | 1. Add failing tests for the change you want to make. Run `npm run test` to see the tests fail.
21 | 1. Fix stuff.
22 | 1. Run `npm run test` to see if the tests pass. Repeat steps 2-4 until done.
23 | 1. Open `tests/index.html` unit test file(s) in actual browser to ensure tests pass everywhere.
24 | 1. Update the documentation to reflect any changes.
25 | 1. Push to your fork and submit a pull request.
26 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright Vasilii A., 2015-2018
4 | Copyright xixilive, 2013-2015
5 |
6 | Permission is hereby granted, free of charge, to any person obtaining a copy of
7 | this software and associated documentation files (the "Software"), to deal in
8 | the Software without restriction, including without limitation the rights to
9 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
10 | the Software, and to permit persons to whom the Software is furnished to do so,
11 | subject to the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be included in all
14 | copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
18 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
19 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
20 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
21 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Input Spinner](https://vsn4ik.github.io/input-spinner/)
2 |
3 | [](LICENSE)
4 | [](https://github.com/vsn4ik/input-spinner/actions/workflows/test.yml)
5 |
6 |
7 | A Number-Spinner, Support keyboard operations and continuous changing.
8 |
9 | ## Basic usage, it's very simple
10 | ```html
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | ```
21 |
22 | ## Getting Started
23 | Download the [production version][production] or the [development version][development].
24 |
25 | In your web page:
26 |
27 | ```html
28 |
29 |
30 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | ```
47 |
48 | ## Documentation
49 | ### Spinner options
50 |
51 | #### delay
52 | > delay to fire changed event in millisecond, default is 500.
53 |
54 | #### changed
55 | > changed event handler, the changed event is a lazy-mode event, default is null.
56 |
57 | #### changing
58 | > changing event handler, the changing event will be fired immediately, default is null.
59 |
60 | ### Spinning Options(setup via data-api)
61 | #### min
62 | > the minimum value, default is null.
63 |
64 | #### max
65 | > the maximum value, default is null.
66 |
67 | #### step
68 | > the changing-value of per-step, if passed as a function, the function will be called within the spinner object scope.
69 |
70 | #### precision
71 | > the precision of value
72 |
73 | ### Built-in rules
74 | ```javascript
75 | currency: { min: 0.00, max: null, step: 0.01, precision: 2 },
76 | quantity: { min: 1, max: 999, step: 1, precision:0 },
77 | percent: { min: 1, max: 100, step: 1, precision:0 },
78 | month: { min: 1, max: 12, step: 1, precision:0 },
79 | day: { min: 1, max: 31, step: 1, precision:0 },
80 | hour: { min: 0, max: 23, step: 1, precision:0 },
81 | minute: { min: 1, max: 59, step: 1, precision:0 },
82 | second: { min: 1, max: 59, step: 1, precision:0 }
83 | ```
84 | Usage:
85 | ```html
86 |
87 | ```
88 |
89 | ## Examples
90 |
91 | ### Work with Bootstrap and Font Awesome
92 |
93 | ```html
94 |
95 |
96 |