PHPackages                             gaomingcode/jquery.spinner - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. gaomingcode/jquery.spinner

ActiveLibrary[Utility & Helpers](/categories/utility)

gaomingcode/jquery.spinner
==========================

A Bootstrap 5 / jQuery plugin to create input spinner elements for number input.

3.0.1(4y ago)010MIT

Since Jun 30Pushed 4y agoCompare

[ Source](https://github.com/gaomingcode/jquery-spinner)[ Packagist](https://packagist.org/packages/gaomingcode/jquery.spinner)[ Docs](https://shaack.com/en/open-source-components)[ RSS](/packages/gaomingcode-jqueryspinner/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

bootstrap-input-spinner
=======================

[](#bootstrap-input-spinner)

[![GitHub Version](https://camo.githubusercontent.com/db2f1c519cfd17b5117b643446a42ac85f19e143f0b94ec3cab2efb999073928/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f67616f6d696e67636f64652f6a71756572792d7370696e6e65722e737667)](https://github.com/gaomingcode/jquery-spinner)[![Packagist Downloads](https://camo.githubusercontent.com/b7853acf9715e345c5c1b8ff623b94f9f6394334a20f27e683454487179154a3/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f67616f6d696e67636f64652f6a71756572792e7370696e6e6572)](https://github.com/gaomingcode/jquery-spinner)[![Github License](https://camo.githubusercontent.com/49a91a0dce1d0f35504fffb483bd296932e80f6e73bdf146804ab62047ba0373/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f67616f6d696e67636f64652f6a71756572792d7370696e6e6572)](https://github.com/gaomingcode/jquery-spinner)

Installation
------------

[](#installation)

### Composer

[](#composer)

```
composer require gaomingcode/jquery.spinner

```

ReadMe from Origin
------------------

[](#readme-from-origin)

A Bootstrap / jQuery plugin to create input spinner elements for number input.

**[Demo page with examples](http://shaack.com/projekte/bootstrap-input-spinner/)**

[![bootstrap-input-spinner](https://camo.githubusercontent.com/0904219b29043d2d5fdd7c53dca0556c41b6f296657f7b6a89ebc6b3f5465f45/68747470733a2f2f73686161636b2e636f6d2f70726f6a656b74652f6173736574732f696d672f626f6f7473747261702d696e7075742d7370696e6e65722d666c6f6174696e67706f696e742d616e642d6931386e2e706e67)](https://camo.githubusercontent.com/0904219b29043d2d5fdd7c53dca0556c41b6f296657f7b6a89ebc6b3f5465f45/68747470733a2f2f73686161636b2e636f6d2f70726f6a656b74652f6173736574732f696d672f626f6f7473747261702d696e7075742d7370696e6e65722d666c6f6174696e67706f696e742d616e642d6931386e2e706e67)*Examples with floating-point and german localization*

> This version is compatible with Bootstrap 5, but we remain a Bootstrap 4 compatible version with the branch [bootstrap4-compatible](https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible). npm package versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.

- **[Current, Bootstrap 5 compatible npm package](https://www.npmjs.com/package/bootstrap-input-spinner)**
- **[Boostrap 4 compatible npm package](https://www.npmjs.com/package/bootstrap-input-spinner/v/2.1.2)**

Features
--------

[](#features)

The Bootstrap InputSpinner

- is **mobile friendly** and **responsive**,
- automatically changes the value when **holding a button**,
- has **internationalized** number formatting,
- allows setting a **prefix** or a **suffix** text in the input,
- handles **`val()`** like the native element,
- **dynamically handles** changing **attribute values** like `disabled` or `class`,
- supports **templates** and **custom editors**, (*new!*)
- dispatches **`change`** and **`input`** **events on value change** like the native element and
- works **without extra css**, only Bootstrap 5 is needed.

Quickstart
----------

[](#quickstart)

### Installation

[](#installation-1)

Current version, Bootstrap 5 compatible

```
npm install bootstrap-input-spinner
```

Bootstrap 4 compatible version

```
nom install bootstrap-input-spinner@2.1.2
```

Or just download the GitHub repository and include `src/bootstrap-input-spinner.js`.

### HTML

[](#html)

Create the element in HTML. The attributes are compatible to the native `input[type="number"]` element.

```

```

### Script

[](#script)

It is a jQuery plugin. So, enable the InputSpinner for all inputs with `type='number'` with the following script.

```

    $("input[type='number']").inputSpinner();

```

That's it. **No extra css needed**, just Bootstrap 5 and jQuery.

API Reference
-------------

[](#api-reference)

### HTML Attributes

[](#html-attributes)

```

```

Use these attributes to configure the behaviour

- `value` // starting value on element creation
- `min` // minimum value when stepping
- `max` // maximum value when stepping
- `step` // step size
- `inputmode` // the "inputmode" of the input, defaults to "decimal" (shows decimal keyboard on touch devices)
- `data-decimals` // shown decimal places
- `data-digit-grouping` // "false" to disable grouping (thousands separator), default is "true"
- `data-prefix` // show a prefix text in the input element
- `data-suffix` // show a suffix text in the input element

The InputSpinner also handles the standard input attributes `required`, `disabled`, `readonly` and `placeholder`.

### Create an instance in JavaScript

[](#create-an-instance-in-javascript)

Use JavaScript to create the instance as a jQuery plugin. You may provide additional configuration in an object as a config parameter.

```
$(element).inputSpinner(config);
```

#### Configuration (props)

[](#configuration-props)

The default configuration is

```
var props = {
    decrementButton: "−", // button text
    incrementButton: "+", // ..
    groupClass: "", // css class of the resulting input-group
    buttonsClass: "btn-outline-secondary",
    buttonsWidth: "2.5rem",
    textAlign: "center", // alignment of the entered number
    autoDelay: 500, // ms threshold before auto value change
    autoInterval: 50, // speed of auto value change
    buttonsOnly: false, // set this `true` to disable the possibility to enter or paste the number via keyboard
    keyboardStepping: true, // set this to `false` to disallow the use of the up and down arrow keys to step
    locale: navigator.language, // the locale, per default detected automatically from the browser
    editor: I18nEditor, // the editor (parsing and rendering of the input)
    template: // the template of the input
        '' +
        '${decrementButton}' +
        '' +
        '${incrementButton}' +
        ''
}
```

##### decrementButton, incrementButton

[](#decrementbutton-incrementbutton)

HTML of the texts inside the buttons.

##### groupClass

[](#groupclass)

Additional css class for the `input-group` of the rendered Bootstrap input.

##### buttonsClass

[](#buttonsclass)

The css class of the buttons. Use it to style the increment and decrement buttons as described [here](https://getbootstrap.com/docs/4.0/components/buttons/). Maybe `buttonsClass: btn-primary`or `btn-success` or whatever type of buttons you want.

##### buttonsWidth

[](#buttonswidth)

The width of the increment and decrement buttons.

##### textAlign

[](#textalign)

The text alignment inside the ``.

##### autoDelay

[](#autodelay)

The delay in ms after which the input automatically changes the value, when holding the increment or decrement button.

##### autoInterval

[](#autointerval)

Speed of the value change when holding the button in ms. A lower value makes it faster.

##### buttonsOnly

[](#buttonsonly)

In `buttonsOnly` mode (set `true`) no direct text input is allowed, the text-input gets the attribute `readonly`, but the plus and minus buttons still allow to change the value.

##### keyboardStepping

[](#keyboardstepping)

In `keyboardStepping` mode (set `true`) allows the use of the up/down arrow keys to increase/decrease the number by the step.

##### locale

[](#locale)

Used to format the number in the UI. Detected automatically from the user's browser, can be set to "de", "en",… or " de\_DE", "en\_GB",….

##### editor (*new!*)

[](#editor-new)

An Editor defines, how the input is parsed and rendered. The default editor of the spinner is the `I18nEditor`, which renders and parses an internationalized number value. There are custom editors in `/src/custom-editors.js`. An Editor must implement the two functions `parse(customValue)`, to parse the input to a number and `render(number)` to render the number to the spinner input.

The simplest custom Editor is the `RawEditor`, it renders just the value und parses just the value, without any changes, like a native number input. It looks like this:

```
var RawEditor = function (props, element) {
    this.parse = function (customFormat) {
        // parse nothing
        return customFormat
    }
    this.render = function (number) {
        // render raw
        return number
    }
}
```

`props` is the configuration of the spinner and `element` is the original HTML element. You can use these values for the configuration of the Editor, like in `I18nEditor`, which uses `props` for the language and `element` for the attributes.

The `TimeEditor` renders and parses the number to time in hours and minutes, separated by a colon.

[![bootstrap-input-spinner](https://camo.githubusercontent.com/7e068fc111b67de952db3500aeea8ca659812f8b7ae3218531b4e9bebc538c14/68747470733a2f2f73686161636b2e636f6d2f70726f6a656b74652f6173736574732f696d672f74696d652d656469746f722e706e67)](https://camo.githubusercontent.com/7e068fc111b67de952db3500aeea8ca659812f8b7ae3218531b4e9bebc538c14/68747470733a2f2f73686161636b2e636f6d2f70726f6a656b74652f6173736574732f696d672f74696d652d656469746f722e706e67)*Supports custom editors to parse and render everything*

##### template (*new!*)

[](#template-new)

To modify the look completely, you can use the template parameter. There is an example about this on the [Demo Page](http://shaack.com/projekte/bootstrap-input-spinner/).

### Programmatic change and read of value

[](#programmatic-change-and-read-of-value)

To change or read the value just use the jQuery `val()` function on the input, like this

```
var currentValue = $(element).val() // read
$(element).val(newValue) // write
```

> **Hint:** Reading the value in vanilla JS with `element.value` will also work, but to set the value you have to use `element.setValue(newValue)` or `$(element).val(newValue)`

### Handling attributes

[](#handling-attributes)

The attributes `min`, `max`, `step`, `decimals`, `placeholder`, `required`, `disabled`, `readonly` and `class`are handled dynamically. The `class` attribute value is dynamically copied to the input element.

#### Sizing

[](#sizing)

If the original elements class is set to `form-control-sm` of `form-control-lg` the class of the resulting input-group is dynamically set to `input-group-sm` or `input-group-lg`.

### Events

[](#events)

The InputSpinner handles `input` and `change` events like the native element.

#### Event handling with vanilla JavaScript

[](#event-handling-with-vanilla-javascript)

```
element.addEventListener("change", function (event) {
    newValue = this.value
})
```

#### Event handling with jQuery syntax

[](#event-handling-with-jquery-syntax)

```
$(element).on("change", function (event) {
    newValue = $(this).val()
})
```

### Methods

[](#methods)

Methods are passed as string values instead of the options object.

#### destroy

[](#destroy)

Removes the InputSpinner and shows the original input element.

```
$(element).inputSpinner("destroy")
```

Minified version
----------------

[](#minified-version)

I don't provide a minified version because I think it should be up to the using programmer to create minified versions, with all the used script sources concatenated to one file.

But, if you want it, it is easy to create your minified version with uglify:

Just install uglify

```
npm install uglify-js -g
```

and then in the src-folder

```
uglifyjs bootstrap-input-spinner.js --compress --mangle > bootstrap-input-spinner.min.js
```

Violà! :)

Browser support
---------------

[](#browser-support)

The spinner works in all modern browsers and in the Internet Explorer. Not tested with IE < 11.

For older browsers (IE 9 or so), that doesn't support `Intl`, when you get an error message like **"Intl is not defined"** (See [issue #34](https://github.com/shaack/bootstrap-input-spinner/issues/34)), just use a shim or polyfill like [Intl.js](https://github.com/andyearnshaw/Intl.js), and it works.

Our further Bootstrap and HTML extensions
=========================================

[](#our-further-bootstrap-and-html-extensions)

If you like this component, you may want to check out our other Bootstrap and HTML extensions [**bootstrap-show-modal**](https://shaack.com/en/open-source-components), [**bootstrap-detect-breakpoint**](https://shaack.com/en/open-source-components), [**auto-resize-textarea**](https://shaack.com/en/open-source-components) and [**external-links-blank**](https://shaack.com/en/open-source-components).

###  Health Score

24

—

LowBetter than 32% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity5

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 96.5% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

1774d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/4b333bd44a2f7f526cc29a59b2945b27c7d2f31df68b92c2eb46efbddc032483?d=identicon)[gaomingcode](/maintainers/gaomingcode)

---

Top Contributors

[![shaack](https://avatars.githubusercontent.com/u/832120?v=4)](https://github.com/shaack "shaack (470 commits)")[![maurojs10](https://avatars.githubusercontent.com/u/5038592?v=4)](https://github.com/maurojs10 "maurojs10 (4 commits)")[![jcputney](https://avatars.githubusercontent.com/u/42720634?v=4)](https://github.com/jcputney "jcputney (2 commits)")[![V-ed](https://avatars.githubusercontent.com/u/16652915?v=4)](https://github.com/V-ed "V-ed (2 commits)")[![gaomingcode](https://avatars.githubusercontent.com/u/53959161?v=4)](https://github.com/gaomingcode "gaomingcode (2 commits)")[![thijstriemstra](https://avatars.githubusercontent.com/u/305679?v=4)](https://github.com/thijstriemstra "thijstriemstra (1 commits)")[![aaroncat007](https://avatars.githubusercontent.com/u/4236169?v=4)](https://github.com/aaroncat007 "aaroncat007 (1 commits)")[![villu164](https://avatars.githubusercontent.com/u/998682?v=4)](https://github.com/villu164 "villu164 (1 commits)")[![alexndlm](https://avatars.githubusercontent.com/u/6824784?v=4)](https://github.com/alexndlm "alexndlm (1 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")[![jboyer87](https://avatars.githubusercontent.com/u/5115300?v=4)](https://github.com/jboyer87 "jboyer87 (1 commits)")[![JPBetley](https://avatars.githubusercontent.com/u/719517?v=4)](https://github.com/JPBetley "JPBetley (1 commits)")

---

Tags

uihtmljquerywidgetbootstrapinputbootstrap-5

### Embed Badge

![Health badge](/badges/gaomingcode-jqueryspinner/health.svg)

```
[![Health](https://phpackages.com/badges/gaomingcode-jqueryspinner/health.svg)](https://phpackages.com/packages/gaomingcode-jqueryspinner)
```

###  Alternatives

[kartik-v/yii2-editable

An enhanced editable widget for Yii 2.0 that allows easy editing of displayed data with numerous configuration possibilities.

1163.2M59](/packages/kartik-v-yii2-editable)[kartik-v/yii2-widget-rating

A Yii2 widget for the simple yet powerful bootstrap-star-rating plugin with fractional rating support (sub repo split from yii2-widgets)

444.1M8](/packages/kartik-v-yii2-widget-rating)[kartik-v/yii2-widget-switchinput

A Yii2 wrapper widget for the Bootstrap Switch plugin to use checkboxes & radios as toggle switchinputes (sub repo split from yii2-widgets)

384.4M13](/packages/kartik-v-yii2-widget-switchinput)[kartik-v/yii2-widget-touchspin

A Yii2 wrapper widget for the Bootstrap Switch plugin to use checkboxes & radios as toggle touchspines (sub repo split from yii2-widgets)

184.1M6](/packages/kartik-v-yii2-widget-touchspin)[techlab/smartwizard

The awesome jQuery step wizard plugin

79096.2k2](/packages/techlab-smartwizard)[kartik-v/yii2-sortable-input

Sortable input widget based on yii2-sortable extension.

24660.4k2](/packages/kartik-v-yii2-sortable-input)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)