{"id":28907565,"url":"https://github.com/thomasdev-de/bs-touchspin","last_synced_at":"2026-05-27T08:02:40.593Z","repository":{"id":299708603,"uuid":"1003836199","full_name":"ThomasDev-de/bs-touchspin","owner":"ThomasDev-de","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-20T10:13:29.000Z","size":155,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-21T16:03:13.784Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/ThomasDev-de.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,"zenodo":null}},"created_at":"2025-06-17T18:34:49.000Z","updated_at":"2025-06-20T10:13:10.000Z","dependencies_parsed_at":"2025-06-17T23:32:24.948Z","dependency_job_id":null,"html_url":"https://github.com/ThomasDev-de/bs-touchspin","commit_stats":null,"previous_names":["thomasdev-de/bs-touchspin"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ThomasDev-de/bs-touchspin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-touchspin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-touchspin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-touchspin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-touchspin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasDev-de","download_url":"https://codeload.github.com/ThomasDev-de/bs-touchspin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fbs-touchspin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261153558,"owners_count":23116911,"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":[],"created_at":"2025-06-21T16:03:10.057Z","updated_at":"2026-05-27T08:02:35.543Z","avatar_url":"https://github.com/ThomasDev-de.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# bsTouchspin Plugin\n\n`bsTouchspin` is a lightweight, flexible, and customizable jQuery plugin that provides an easy-to-use spinner interface\nfor numeric inputs. It allows for smooth increment and decrement of numeric values through up and down buttons, while\nsupporting custom configurations for appearance and behavior.\n\n![img.png](demo/img.png)\n---\n\n## Features\n\n- Increment and decrement buttons for numeric inputs.\n- Customizable options:\n    - Minimum and maximum values.\n    - Step size (fixed or dynamic).\n    - Input size (`sm` | `lg`).\n    - Prefix and postfix spans.\n    - Custom button styles, icons, and behavior.\n- Built-in number formatting options:\n    - Currency.\n    - Percent.\n    - Number.\n- Locale support for number formatting.\n- Customizable events and callbacks, such as `onInit`, `onStart`, and `onStop`.\n- Utility methods for formatting and handling decimals.\n- Responsiveness and accessibility.\n- Support for dynamic and real-time changes.\n\n---\n\n## Installation\n\n### Using a Content Delivery Network (CDN)\n\nInclude the following scripts and styles in your HTML file:\n\n```html\n\n\u003cscript src=\"https://code.jquery.com/jquery-3.6.4.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path/to/bs-touchspin.min.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css\"\u003e\n```\n\n### Local Installation\n\n1. Download the `bs-touchspin` script file and its dependencies (e.g., Bootstrap CSS/JS, Bootstrap Icons).\n2. Include them in your project.\n\n---\n\n## Usage\n\n### Basic Initialization\n\nThe simplest use case involves turning a standard text input into a touchspin spinner:\n\n```html\n\u003cinput id=\"spinner\" type=\"text\"\u003e\n\u003cscript\u003e\n    $('#spinner').bsTouchspin();\n\u003c/script\u003e\n```\n\n---\n\n## Options and Configuration\n\nThe plugin supports a wide range of customization options, as listed below:\n\n### General Configuration\n\nThe following **global configuration** options allow fine-tuning of touchspin behavior:\n\n| Option          | Description                                                                                      | Data Type      | Default          |\n|-----------------|--------------------------------------------------------------------------------------------------|----------------|------------------|\n| `minSpeed`      | The minimum speed (in ms) for holding the increment or decrement button.                         | `number`       | `1`              |\n| `startSpeed`    | The initial speed (in ms) when holding the increment or decrement button.                        | `number`       | `600`            |\n| `delay`         | Delay (in ms) before triggering the stop callback after releasing a button or leaving focus.     | `number`       | `1000`           |\n| `locale`        | Defines the locale used for number formatting (e.g., `'en-US'`, `'de-DE'`, etc.).                | `string`       | `'en-US'`        |\n| `maximumMax`    | The value that is taken for max if max has not been defined.                                     | `number\\|null` | `2.147.483.647`  |\n| `maximumMin`    | The value that is taken for min if min is not defined.                                           | `number\\|null` | `-2.147.483.648` |\n| `inputMinWidth` | A minimum width for the input field and formatting output. It can have all CSS values for width. | `number`       | `75`             |\n\n---\n\n#### Changing Global Configuration\n\nYou can change the global configuration dynamically at runtime by using the `$.bsTouchspin.setConfig()` method:\n\n```javascript\n$.bsTouchspin.setConfig({\n    minSpeed: 10,        // Set the minimum holding speed to 10ms\n    startSpeed: 500,     // Start speed reduced to 500ms\n    delay: 800,          // Delay before onStop callback to 800ms\n    locale: 'de-DE'      // Use German locale for number formatting\n});\n```\n\nThis will update the behavior of all future `bsTouchspin` instances created after the configuration is set.\n\n---\n\n### Instance-Specific Configuration\n\nPass configuration options during initialization:\n\n```javascript\n$('#spinner').bsTouchspin({\n    size: 'sm',\n    step: 0.5,\n    min: 10,\n    max: 50,\n    formatter: 'percent',\n    onStart: function (value) {\n        console.log('Started with value:', value);\n    },\n    onStop: function (value, diff) {\n        console.log('Stopped with value:', value, 'diff to start: ', diff);\n    }\n});\n```\n\n### Note:\nIf configurable values such as **`min`**, **`max`**, **`step`**, or other numeric settings are already defined as **HTML attributes** on the `\u003cinput\u003e` element (e.g., `min=\"10\"`, `max=\"50\"`), the HTML attributes will typically **take precedence over JavaScript configurations** unless explicitly overridden by the JavaScript options provided during initialization.\n\n\n---\n\n### Configuration Options\n\nBelow is the full list of default options for the `bsTouchspin` plugin:\n\n| Option                     | Description                                                                                                                                                                                                                     | Data Type              | Default                                      |\n|----------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------|----------------------------------------------|\n| `size`                     | Sets the size of the input. Acceptable values: `null`, `sm`, or `lg`.                                                                                                                                                           | `string` or `null`     | `null`                                       |\n| `step`                     | Defines the step size for increments or decrements. Set to `\"any\"` for dynamic step size.                                                                                                                                       | `number` or `string`   | `\"any\"`                                      |\n| `min`                      | The minimum value allowed for the input.                                                                                                                                                                                        | `number` or `null`     | `null`                                       |\n| `max`                      | The maximum value allowed for the input.                                                                                                                                                                                        | `number` or `null`     | `null`                                       |\n| `prefix`                   | Prefix text or symbol shown before the input value.                                                                                                                                                                             | `string` or `null`     | `null`                                       |\n| `postfix`                  | Postfix text or symbol shown after the input value.                                                                                                                                                                             | `string` or `null`     | `null`                                       |\n| `allowInput`               | Allows manual input of a value in the input field.                                                                                                                                                                              | `boolean`              | `true`                                       |\n| `buttons.up.class`         | CSS classes for the increment (\"up\") button.                                                                                                                                                                                    | `string`               | `'btn-secondary rounded-end-pill fw-bold'`   |\n| `buttons.up.icon`          | Icon for the increment (\"up\") button (uses Bootstrap Icons).                                                                                                                                                                    | `string`               | `'bi bi-plus-lg'`                            |\n| `buttons.up.iconSetZero`   | Icon for the increment button when the value reaches zero.                                                                                                                                                                      | `string`               | `'bi bi-trash'`                              |\n| `buttons.down.class`       | CSS classes for the decrement (\"down\") button.                                                                                                                                                                                  | `string`               | `'btn-secondary rounded-start-pill fw-bold'` |\n| `buttons.down.icon`        | Icon for the decrement (\"down\") button (uses Bootstrap Icons).                                                                                                                                                                  | `string`               | `'bi bi-dash-lg'`                            |\n| `buttons.down.iconSetZero` | Icon for the decrement button when the value reaches zero.                                                                                                                                                                      | `string`               | `'bi bi-trash'`                              |\n| `formatter`                | Formatting style for the input value. Acceptable values: `'number'`, `'currency'`, or `'percent'`. You can also specify your own formatting function. The parameters `value`, `decimals` and `locale` are passed into the case. | `string` or `function` | `'number'`                                   |\n| `onInit`                   | Callback function, executed during initialization.                                                                                                                                                                              | `function`             | `function (value) {}`                        |\n| `onStart`                  | Callback function, executed when incrementing or decrementing starts.                                                                                                                                                           | `function`             | `function (value) {}`                        |\n| `onStop`                   | Callback function, executed when incrementing or decrementing stops.                                                                                                                                                            | `function`             | `function (value, diff) {}`                  |\n\n---\n\n## Methods\n\n### `val`\n\nThe **`val`** method allows you to set the spinner's value programmatically.\n\n#### **Usage:**\n\n```javascript\n$('#example-spinner').bsTouchspin('val', value);\n```\n\n- **`value`**: The numeric value you want to set for the spinner.\n\n#### **Examples:**\n\n1. **Set the value of the spinner:**\n\n```javascript\n$('#example-spinner').bsTouchspin('val', 42); // Sets the spinner's value to 42.\n```\n\n#### **Notes:**\n\n- **Validation:** The provided value is validated against the configured `min`, `max`, and `step` properties. If the\n  value exceeds the defined limits, it will be automatically adjusted:\n\n```javascript\n$('#example-spinner').bsTouchspin({\n    min: 0,\n    max: 100\n});\n\n$('#example-spinner').bsTouchspin('val', 150); // The value will be set to 100 since it exceeds the `max`.\n```\n\n- The applied value respects any configured formatting via options like `formatter` (e.g., currency or percentage).\n\n## Events\n\nThe plugin emits the following events that can be listened to:\n\n- **`init.bs.touchspin`:** Triggered on initialization.\n- **`start.bs.touchspin`:** Triggered when the spinner interaction starts.\n- **`stop.bs.touchspin`:** Triggered when the spinner interaction stops.\n\n### Example Usage:\n\n```javascript\n$('#spinner').on('init.bs.touchspin', function (event, startValue) {\n    console.log('Touchspin initialized:', startValue);\n});\n\n$('#spinner').on('stop.bs.touchspin', function (event, stopValue, diff) {\n    console.log('Touchspin stopped. Final value:', stopValue, 'Difference:', diff);\n});\n```\n\n---\n\n## Utility Functions\n\nThe plugin provides useful utility functions for working with numeric values:\n\n### `formatNumber(number, decimalPlaces, locale)`\n\nFormats a number with the desired decimal places and locale.\n\n```javascript\nconst formatted = $.bsTouchspin.utils.formatNumber(1234.56, 2, 'de-DE');\nconsole.log(formatted); // \"1.234,56\"\n```\n\n### `formatCurrency(value, decimals, locale)`\n\nFormats a value as currency.\n\n```javascript\nconst currency = $.bsTouchspin.utils.formatCurrency(200, 2, 'en-US');\nconsole.log(currency); // \"$200.00\"\n```\n\n### `formatPercent(value, decimals, locale)`\n\nFormats a value as a percentage.\n\n```javascript\nconst percent = $.bsTouchspin.utils.formatPercent(0.45, 2, 'de-DE');\nconsole.log(percent); // \"45,00%\"\n```\n\n---\n\n## Example Integration\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css\"\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css\"\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-3.6.4.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"path/to/bs-touchspin.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class=\"container\"\u003e\n    \u003clabel for=\"example-spinner\"\u003eExample Spinner\u003c/label\u003e\n    \u003cinput id=\"example-spinner\" type=\"text\"/\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\n    $('#example-spinner').bsTouchspin({\n        step: 1,\n        min: 0,\n        max: 100,\n        formatter: 'currency'\n    });\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n---\n\n## Contributing\n\nFeel free to fork the repository, open issues, or submit pull requests to improve the plugin. Contributions, feedback,\nand suggestions are highly welcome!\n\n---\n\n## License\n\nLicensed under the MIT License.\n\n---\n\n### Author\n\nThis plugin was developed to enhance user interactions with input fields and provide a modern interface for numeric\ncontrols in web applications.\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fbs-touchspin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasdev-de%2Fbs-touchspin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fbs-touchspin/lists"}