{"id":14972453,"url":"https://github.com/nkovacic/angular-touchspin","last_synced_at":"2025-06-24T20:09:11.731Z","repository":{"id":57179272,"uuid":"50992361","full_name":"nkovacic/angular-touchspin","owner":"nkovacic","description":"Angular touchspin","archived":false,"fork":false,"pushed_at":"2019-01-13T15:39:10.000Z","size":195,"stargazers_count":10,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-15T11:12:10.650Z","etag":null,"topics":["angular","bootstrap3","bower","typescript","webpack"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/nkovacic.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}},"created_at":"2016-02-03T10:29:13.000Z","updated_at":"2021-09-05T17:32:45.000Z","dependencies_parsed_at":"2022-09-11T07:01:19.786Z","dependency_job_id":null,"html_url":"https://github.com/nkovacic/angular-touchspin","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/nkovacic/angular-touchspin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkovacic%2Fangular-touchspin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkovacic%2Fangular-touchspin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkovacic%2Fangular-touchspin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkovacic%2Fangular-touchspin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nkovacic","download_url":"https://codeload.github.com/nkovacic/angular-touchspin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nkovacic%2Fangular-touchspin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261749216,"owners_count":23203990,"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":["angular","bootstrap3","bower","typescript","webpack"],"created_at":"2024-09-24T13:46:56.672Z","updated_at":"2025-06-24T20:09:11.701Z","avatar_url":"https://github.com/nkovacic.png","language":"TypeScript","readme":"# Angular Touchspin\n\n[![License](http://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](http://www.opensource.org/licenses/MIT)\n[![NPM Release](https://img.shields.io/npm/v/angular-touchspin.svg?style=flat-square)](https://www.npmjs.org/package/angular-touchspin)\n[![NPM Monthly Downloads](https://img.shields.io/npm/dm/angular-touchspin.svg?style=flat-square)](https://www.npmjs.org/package/angular-touchspin)\n\n**angular-touchspin** is a port of [istvan-ujjmeszaros/bootstrap-touchspin](https://github.com/istvan-ujjmeszaros/bootstrap-touchspin). It could now show some differences with it.\n\nThe goal is to provide the same API than the original one but without jQuery and using all the angular power.\n\n\u003c!---\n## Demo\n\n[Demo](http://nkovacic.github.io/angular-touchspin/)\n--\u003e\n## Requirements\n\n1. `AngularJS` ≥ `1.4.x`\n1. `Bootstrap` ≥ `3.x` for the default styles (Can use `bootstrap-css-only`, you must add this to your bower or include this manually)\n5. NOTE: please check the requirements for earlier releases, if these are an issue.\n\n### Where to get it\n\n**Via Bower:**\n\nRun `bower install angular-touchspin` from the command line.\nInclude script tags similar to the following:\n```html\n\u003clink rel='stylesheet' href='/bower_components/angular-touchspin/dist/angular-touchspin.css'\u003e\n\u003cscript src='/bower_components/angular-touchspin/dist/angular-touchspin.min.js'\u003e\u003c/script\u003e\n```\n\n**Via NPM:**\n\nRun `npm install angular-touchspin` from the command line.\nInclude script tags similar to the following:\n```html\n\u003clink rel='stylesheet' href='/node_modules/angular-touchspin/dist/angular-touchspin.css'\u003e\n\u003cscript src='/node_modules/angular-touchspin/dist/angular-touchspin.min.js'\u003e\u003c/script\u003e\n```\nInstall using commonjs (eg componentjs, Webpack, Browserify):\n```javascript\nimport { default as touchspinModule } from 'angular-touchspin';\nimport 'angular-touchspin/dist/angular-touchspin.css'; \n\nangular.module('myModule', [touchspinModule]);\n```\nFor CSS support with Webpack, install the style-loader, css-loader (and postcss-loader) and configure the loader in your webpack.config.js similar to the following:\n```\nloaders: [\n  {test: /\\.css$/, loader: 'style!css!postcss'}\n]\n```\n\n**Via Github**\n\nDownload the code from [https://github.com/nkovacic/angular-touchspin/releases/latest](https://github.com/nkovacic/angular-touchspin/releases/latest), unzip the files then add script tags similar to the following:\n```html\n\u003clink rel='stylesheet' href='/path/to/unzipped/files/dist/angular-touchspin.min.css'\u003e\n\u003cscript src='/path/to/unzipped/files/dist/angular-touchspin.min.js'\u003e\u003c/script\u003e\n```\n\n### Demo\n\nThe demo can be found on [stackblitz](https://stackblitz.com/edit/angular-touchspin-example) and features all the examples found in the [dev](https://github.com/nkovacic/angular-touchspin/tree/master/dev) folder in this repository.\n\n### Usage\n\n3. Include `angular-touchspin.min.js`\n4. Add a dependency to `angular-touchspin` in your app module, for example: ```angular.module('myModule', ['nk.touchspin'])```.\n5. Create an element to hold the control and add an `ng-model=\"numberVariable\"` attribute where `numberVariable` is the scope variable that will hold the selected number value:\n```html\n\u003cdiv touch-spin ng-model=\"numberVariable\"\u003e\u003c/div\u003e\n```\nOR\n```html\n\u003ctouch-spin ng-model=\"numberVariable\"\u003e\u003c/touch-spin\u003e\n```\nThis acts similar to a regular AngularJS / form input if you give it a name attribute, allowing for form submission and AngularJS form validation.\n\n### Options\n\nangular-touchspin can be configured using an options attribute `options=\"optionsVariable\"` where `optionsVariable` is the scope variable that will hold options for the touchspin control.\n```html\n\u003cdiv touch-spin ng-model=\"numberVariable\" options=\"optionsVariable\"\u003e\u003c/div\u003e\n```\nOR\n```html\n\u003ctouch-spin ng-model=\"numberVariable\" options=\"optionsVariable\"\u003e\u003c/touch-spin\u003e\n```\nAvailable options:\n```javascript\ninterface ITouchSpinOptions {\n\tbuttonDownClass?: string;\t\n\tbuttonDownShow?: boolean;\t\n\tbuttonDownTxt?: string;\n\tbuttonUpClass?: string;\n\tbuttonUpShow?: boolean;\n\tbuttonUpTxt?: string;\n\tmin?: number;\n\tmax?: number;\n\tstep?: number;\n\tdecimals?: number;\n\tdecimalsDelimiter?: string;\n\tstepInterval?: number;\n\tforceStepDivisibility?: string; // none | floor | round | ceil\n\tinputReadOnly?: boolean;\n\tstepIntervalDelay?: number;\n\tverticalButtons?: boolean;\n\tverticalUpClass?: string;\n\tverticalDownClass?: string;\n\tprefix?: string;\n\tpostfix?: string;\n\tprefixExtraClass?: string;\n\tpostfixExtraClass?: string;\n\tmousewheel?: boolean;\n}\n```\n\nIt also supports min and max attributes for validating input value range (useful if the default value is not preffered).\n```html\n\u003ctouch-spin ng-model=\"numberVariable\" min=\"minValue\" max=\"maxValue\"\u003e\u003c/touch-spin\u003e\n```\n\n### Callback\n\nangular-touchspin supports callback on model change using an attribute `on-change=\"valueChanged(value,oldValue)\"` where `valueChanged` is the scope function that will be called on change.\n```html\n\u003cdiv touch-spin ng-model=\"numberVariable\" options=\"optionsVariable\" on-change=\"valueChanged(value,oldValue)\"\u003e\u003c/div\u003e\n```\nOR\n```html\n\u003ctouch-spin ng-model=\"numberVariable\" options=\"optionsVariable\" on-change=\"valueChanged(value,oldValue)\"\u003e\u003c/touch-spin\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnkovacic%2Fangular-touchspin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnkovacic%2Fangular-touchspin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnkovacic%2Fangular-touchspin/lists"}