{"id":13607441,"url":"https://github.com/shaack/bootstrap-input-spinner","last_synced_at":"2025-05-15T01:09:21.181Z","repository":{"id":30530488,"uuid":"125179237","full_name":"shaack/bootstrap-input-spinner","owner":"shaack","description":"A Bootstrap plugin to create input spinner elements for number input","archived":false,"fork":false,"pushed_at":"2025-03-10T22:42:23.000Z","size":339,"stargazers_count":228,"open_issues_count":12,"forks_count":156,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-09T18:29:43.418Z","etag":null,"topics":["bootstrap","frontend","input","jquery","jquery-plugin","spinner","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shaack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-14T08:23:04.000Z","updated_at":"2025-04-15T11:51:29.000Z","dependencies_parsed_at":"2024-02-08T16:42:58.965Z","dependency_job_id":"3a981b47-2933-44e4-af38-196700ee926a","html_url":"https://github.com/shaack/bootstrap-input-spinner","commit_stats":{"total_commits":508,"total_committers":17,"mean_commits":29.88235294117647,"dds":0.04527559055118113,"last_synced_commit":"73bbabe047941c69acddac3aa98a18fe5c8fcb2a"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-input-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-input-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-input-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shaack%2Fbootstrap-input-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shaack","download_url":"https://codeload.github.com/shaack/bootstrap-input-spinner/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254254043,"owners_count":22039792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","frontend","input","jquery","jquery-plugin","spinner","ui"],"created_at":"2024-08-01T19:01:18.648Z","updated_at":"2025-05-15T01:09:16.174Z","avatar_url":"https://github.com/shaack.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# bootstrap-input-spinner\n\nA Bootstrap extension to create input spinner elements for number input.\n\n\u003e Note: bootstrap-input-spinner is now a ES6 module. You find the old ES5 version in the folder `es5-deprecated`. The ES5 version is not maintained anymore and will be removed in the future.\n\n![bootstrap-input-spinner](https://shaack.com/projekte/assets/img/bootstrap-input-spinner-floatingpoint-and-i18n.png)\n*Examples with floating-point and german localization*\n\n## References\n\n- [Demo page with usage examples](http://shaack.com/projekte/bootstrap-input-spinner/)\n- [GitHub repository](https://github.com/shaack/bootstrap-input-spinner/)\n- [npm package](https://www.npmjs.com/package/bootstrap-input-spinner)\n\n### Older version, Bootstrap 4 compatible\n\n\u003e The current is compatible with **Bootstrap 5**, but we remain a Bootstrap 4 compatible version with the branch\n\u003e \u003ca href=\"https://github.com/shaack/bootstrap-input-spinner/tree/bootstrap4-compatible\"\u003ebootstrap4-compatible\u003c/a\u003e. \n\u003e npm package versions 3.x are Bootstrap 5 compatible, versions 2.x Bootstrap 4 compatible.\n\n- [Bootstrap 4 compatible npm package](https://www.npmjs.com/package/bootstrap-input-spinner/v/2.1.2)\n\n## Features\n\nThe Bootstrap InputSpinner\n\n- is **mobile friendly** and **responsive**,\n- automatically changes the value when **holding a button**,\n- has **internationalized** number formatting,\n- allows setting a **prefix** or a **suffix** text in the input,\n- handles **`val()`** like the native element,\n- **dynamically handles** changing **attribute values** like `disabled` or `class`,\n- supports **templates** and **custom editors**, (*new!*)\n- dispatches **`change`** and **`input`** **events on value change** like the native element and\n- works **without extra css**, only Bootstrap 5 is needed.\n\n## Quickstart\n\n### Installation\n\nCurrent version, Bootstrap 5 compatible\n```bash\nnpm install bootstrap-input-spinner\n```\nBootstrap 4 compatible version\n```bash\nnpm install bootstrap-input-spinner@2.2.0\n```\n\n\nOr just download the GitHub repository and include `src/bootstrap-input-spinner.js`.\n\n### HTML\n\nCreate the element in HTML. The attributes are compatible to the native `input[type=\"number\"]` element.\n\n```html\n\u003cinput type=\"number\" value=\"50\" min=\"0\" max=\"100\" step=\"10\"/\u003e\n```\n\n### Script\n\n```html\n\u003cscript type=\"module\"\u003e\n    import {InputSpinner} from \"./src/InputSpinner.js\"\n\n    const inputSpinnerElements = document.querySelectorAll(\"input[type='number']\")\n    for (const inputSpinnerElement of inputSpinnerElements) {\n        new InputSpinner(inputSpinnerElement)\n    }\n\u003c/script\u003e\n```\n\nThat's it. **No extra css needed**, just Bootstrap 5 and jQuery. (Note: jQuery will be removed in the future)\n\n## API Reference\n\n### HTML Attributes\n\n```html\n\u003cinput type=\"number\" value=\"4.5\" min=\"0\" max=\"9\" step=\"0.1\" data-decimals=\"2\" data-suffix=\"°C\"/\u003e\n```\n\nUse these attributes to configure the behaviour\n\n- `value` // starting value on element creation\n- `min` // minimum value when stepping\n- `max` // maximum value when stepping\n- `step` // step size\n- `inputmode` // the \"inputmode\" of the input, defaults to \"decimal\" (shows decimal keyboard on touch devices)\n- `data-decimals` // shown decimal places\n- `data-digit-grouping` // \"false\" to disable grouping (thousands separator), default is \"true\"\n- `data-prefix` // show a prefix text in the input element\n- `data-suffix` // show a suffix text in the input element\n\nThe InputSpinner also handles the standard input attributes `required`, `disabled`, `readonly` and `placeholder`.\n\n### Create an instance in JavaScript\n\nUse JavaScript to create the instance as a jQuery plugin. You may provide additional configuration in an object as a\nconfig parameter.\n\n```js\n$(element).inputSpinner(config);\n```\n\n#### Configuration (props)\n\nThe default configuration is\n\n```javascript\nvar props = {\n    decrementButton: \"\u003cstrong\u003e\u0026minus;\u003c/strong\u003e\", // button text\n    incrementButton: \"\u003cstrong\u003e\u0026plus;\u003c/strong\u003e\", // ..\n    groupClass: \"\", // css class of the resulting input-group\n    buttonsClass: \"btn-outline-secondary\",\n    buttonsWidth: \"2.5rem\",\n    textAlign: \"center\", // alignment of the entered number\n    autoDelay: 500, // ms threshold before auto value change\n    autoInterval: 50, // speed of auto value change, set to `undefined` to disable auto-change\n    buttonsOnly: false, // set this `true` to disable the possibility to enter or paste the number via keyboard\n    keyboardStepping: true, // set this to `false` to disallow the use of the up and down arrow keys to step\n    locale: navigator.language, // the locale, per default detected automatically from the browser\n    editor: I18nEditor, // the editor (parsing and rendering of the input)\n    template: // the template of the input\n        '\u003cdiv class=\"input-group ${groupClass}\"\u003e' +\n        '\u003cbutton style=\"min-width: ${buttonsWidth}\" class=\"btn btn-decrement ${buttonsClass} btn-minus\" type=\"button\"\u003e${decrementButton}\u003c/button\u003e' +\n        '\u003cinput type=\"text\" inputmode=\"decimal\" style=\"text-align: ${textAlign}\" class=\"form-control form-control-text-input\"/\u003e' +\n        '\u003cbutton style=\"min-width: ${buttonsWidth}\" class=\"btn btn-increment ${buttonsClass} btn-plus\" type=\"button\"\u003e${incrementButton}\u003c/button\u003e' +\n        '\u003c/div\u003e'\n}\n```\n\n##### decrementButton, incrementButton\n\nHTML of the texts inside the buttons.\n\n##### groupClass\n\nAdditional css class for the `input-group` of the rendered Bootstrap input.\n\n##### buttonsClass\n\nThe css class of the buttons. Use it to style the increment and decrement buttons as\ndescribed [here](https://getbootstrap.com/docs/4.0/components/buttons/). Maybe `buttonsClass: btn-primary`\nor `btn-success` or whatever type of buttons you want.\n\n##### buttonsWidth\n\nThe width of the increment and decrement buttons.\n\n##### textAlign\n\nThe text alignment inside the `\u003cinput\u003e`.\n\n##### autoDelay\n\nThe delay in ms after which the input automatically changes the value, when holding the increment or decrement button.\n\n##### autoInterval\n\nSpeed of the value change when holding the button in ms. A lower value makes it faster.\n\n##### buttonsOnly\n\nIn `buttonsOnly` mode (set `true`) no direct text input is allowed, the text-input gets the attribute `readonly`, but\nthe plus and minus buttons still allow to change the value.\n\n##### keyboardStepping\n\nIn `keyboardStepping` mode (set `true`) allows the use of the up/down arrow keys to increase/decrease the number by the\nstep.\n\n##### locale\n\nUsed to format the number in the UI. Detected automatically from the user's browser, can be set to \"de\", \"en\",… or \"\nde_DE\", \"en_GB\",….\n\n##### editor (*new!*)\n\nAn Editor defines, how the input is parsed and rendered. The default editor of the spinner is the `I18nEditor`, which\nrenders and parses an internationalized number value. There are custom editors in `/src/custom-editors.js`. An Editor\nmust implement the two functions `parse(customValue)`, to parse the input to a number and `render(number)` to render the\nnumber to the spinner input.\n\nThe simplest custom Editor is the `RawEditor`, it renders just the value und parses just the value, without any changes,\nlike a native number input. It looks like this:\n\n```javascript\nvar RawEditor = function (props, element) {\n    this.parse = function (customFormat) {\n        // parse nothing\n        return customFormat\n    }\n    this.render = function (number) {\n        // render raw\n        return number\n    }\n}\n```\n\n`props` is the configuration of the spinner and `element` is the original HTML element. You can use these values for the\nconfiguration of the Editor, like in `I18nEditor`, which uses `props` for the language and `element` for the attributes.\n\nThe `TimeEditor` renders and parses the number to time in hours and minutes, separated by a colon.\n\n![bootstrap-input-spinner](https://shaack.com/projekte/assets/img/time-editor.png)\n*Supports custom editors to parse and render everything*\n\n##### template\n\nTo modify the look completely, you can use the template parameter. There is an example about this on the\n[Demo Page](http://shaack.com/projekte/bootstrap-input-spinner/).\n\n### Programmatic change and read of value\n\nTo change or read the value just use the jQuery `val()` function on the input, like this\n\n```javascript\nvar currentValue = $(element).val() // read\n$(element).val(newValue) // write\n```\n\n\u003e **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)`\n\n### Handling attributes\n\nThe attributes\n`min`, `max`, `step`, `decimals`, `placeholder`, `required`, `disabled`, `readonly` and `class`\nare handled dynamically. The `class` attribute value is dynamically copied to the input element.\n\n#### Sizing\n\nIf the original elements class is set to `form-control-sm` of `form-control-lg` the class of the resulting input-group\nis dynamically set to `input-group-sm` or `input-group-lg`.\n\n### Events\n\nThe InputSpinner handles `input` and `change` events like the native element.\n\n#### Event handling with vanilla JavaScript\n\n```javascript\nelement.addEventListener(\"change\", function (event) {\n    newValue = this.value\n})\n```\n\n#### Event handling with jQuery syntax\n\n```javascript\n$(element).on(\"change\", function (event) {\n    newValue = $(this).val()\n})\n```\n\n### Methods\n\nMethods are passed as string values instead of the options object.\n\n#### destroy\n\nRemoves the InputSpinner and shows the original input element.\n\n```javascript\n$(element).inputSpinner(\"destroy\")\n```\n\n## Minified version\n\nI don't provide a minified version because I think it should be up to the using programmer to create minified versions,\nwith all the used script sources concatenated to one file.\n\nBut, if you want it, it is easy to create your minified version with uglify: https://www.npmjs.com/package/uglify-js\n\nJust install uglify\n\n```bash\nnpm install uglify-js -g\n```\n\nand then in the src-folder\n\n```bash\nuglifyjs bootstrap-input-spinner.js --compress --mangle \u003e bootstrap-input-spinner.min.js\n```\n\nViolà! :)\n\n## Browser support\n\nThe spinner works in all modern browsers and Internet Explorer. Not tested with IE \u003c 11.\n\nFor older browsers (IE 9 or so), that doesn't support `Intl`, when you get an error message like\n**\"Intl is not defined\"** (See [issue #34](https://github.com/shaack/bootstrap-input-spinner/issues/34)), just use a\nshim or polyfill like [Intl.js](https://github.com/andyearnshaw/Intl.js), and it works.\n\n---\n\nFind more high quality modules from [shaack.com](https://shaack.com)\non [our projects page](https://shaack.com/works).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fbootstrap-input-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshaack%2Fbootstrap-input-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshaack%2Fbootstrap-input-spinner/lists"}