> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/forms/input-spinner.md).

# Input Spinner

## Introduction

 A Bootstrap 4 / jQuery plugin to create [input spinner](https://shaack.com/projekte/bootstrap-input-spinner/) elements for number input, by [shaack.com](https://shaack.com/) engineering.

![](/files/-LRmYefR_Jkq_Syyu6I3)

## How to Setup

### **HTML Structure**

```markup
<input type="number" class="normal" value="50" min="0" max="100" step="10" />
```

## Dependency

### JS

```markup
<!-- Bootstrap Input spinner JavaScript -->
<script src="vendors/bootstrap-input-spinner/src/bootstrap-input-spinner.js"></script>
<script src="dist/js/inputspinner-data.js"></script>
```

### Initialize Input Spinner JS

```javascript
/* Inputspinner Init*/  
"use strict";
$("input.normal").inputSpinner({buttonsClass: "btn-outline-light"});
$("input.float").inputSpinner({buttonsClass: "btn-light"});
$("input.small").inputSpinner({groupClass: "input-group-sm w-50",buttonsClass: "btn-outline-light"});
$("input.large").inputSpinner({groupClass: "input-group-lg",buttonsClass: "btn-light"});
```