Bootstrap Number Spinner

Mobile-friendly number spinner for Twitter Bootstrap.

Options

All options can be set using data- attributes or passed as a TypeScript object.

min

Minimum value

max

Maximum value

format

Formatting string used for displaying the value. Bootstrap Number Spinner uses sprintf.js for formatting.

Events

change.bs.spinner

Fired when the value of the spinner changes. The plain numeric value is passed as second parameter to the event handler, see example.

Setting / getting the value

The value can be get/set using the val function on the jQuery object:

import { BootstrapNumberSpinner } from 'bootstrap-number-spinner';

const node =  document.querySelector('#spinner');
if (node) {
  const spinner = new BootstrapNumberSpinner(node, { format: '%d mm' });
  spinner.value = 3;
}

Examples

Integer

<div class="input-group">
  <input type="text" name="font-size" class="form-control spinner"
    value="12" data-format="%d pt" data-min="6" data-max="20">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button" data-incr="-1">–</button>
    <button class="btn btn-default" type="button" data-incr="1">+</button>
  </span>
</div>

Decimal

<div class="input-group">
  <input type="text" name="font-size" class="form-control spinner"
    value="1.09" data-format="$ %.2f" data-min="0" data-max="2">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button" data-incr="-0.01">–</button>
    <button class="btn btn-default" type="button" data-incr="0.01">+</button>
  </span>
</div>

Initialization via JavaScript

const optionsDemoNode =  document.querySelector('#options-demo-spinner');
if (optionsDemoNode) {
  const optionsDemoSpinner = new BootstrapNumberSpinner(
      optionsDemoNode, { min: 2, max: 5, format: '%d mm' });
  optionsDemoSpinner.value = 3;
}

const eventDemoNode = document.querySelector('#event-demo-spinner');
const eventDemoIndicator = document.querySelector('#event-demo-indicator');

if (eventDemoNode && eventDemoIndicator) {
  const eventDemoSpinner = new BootstrapNumberSpinner(eventDemoNode);
  eventDemoNode.addEventListener('change.bs.spinner', evt => {
    eventDemoIndicator.innerHTML = eventDemoSpinner.value.toString();
  })
}