Bootstrap TouchSpin http://www.virtuosoft.eu/code/bootstrap-touchspin

A mobile and touch friendly input spinner component for Bootstrap 3. It supports the mousewheel and the up/down keys.

Base

With postfix

With prefix

Vertical button alignment

Vertical buttons with custom icons

Sizes



Usage


require(['jquery', 'px-libs/jquery.bootstrap-touchspin'], function($) {
  ...
});
        

Usage

To use bootstrap-touchspin plugin, you need to include the next scripts:


<script src="path/to/js/libs/jquery.bootstrap-touchspin.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-touchspin.js"></script>
        

Then inject the plugin into your angular application:

angular.module('yourApp', ['angular-touchspin']);

Alternatively, you can include bootstrap-touchspin plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'angular-touchspin',
    files: [
      'path/to/js/libs/jquery.bootstrap-touchspin.js',
      'path/to/js/pixeladmin/directives/angular-touchspin.js',
    ],
  },
]);
        

touch-spin directive

You can use touch-spin directive on input elements. And when the scope is destroyed the directive will be destroyed.

Options

bootstrap-touchspin's options can be specified as attributes (see the plugin's documentation). All options expect an angular expression instead of a literal string.

  • boostat
  • booster
  • buttondown_class
  • buttonup_class
  • decimals
  • forcestepdivisibility
  • initval
  • max
  • maxboostedstep
  • min
  • mousewheel
  • postfix
  • postfix_extraclass
  • prefix
  • prefix_extraclass
  • step
  • stepinterval
  • stepintervaldelay
  • verticalbuttons
  • verticaldownclass
  • verticalupclass

<input touch-spin type="text" class="form-control"
       forcestepdivisibility="'floor'"
       step="5"
       verticalbuttons="true"
       buttonup_class="'btn btn-primary'">
        

Events

Event handlers can be bound using attributes (see the plugin's documentation):

  • on-max
  • on-min
  • on-startdownspin
  • on-startspin
  • on-startupspin
  • on-stopdownspin
  • on-stopspin
  • on-stopupspin

<input touch-spin type="text" class="form-control"
       on-startspin="ctrl.startspin"
       on-min="ctrl.min"
       on-stopdownspin="ctrl.stopdownspin">
        

function SomeController() {
  this.startspin = function() { ... }
  this.min = function() { ... }
  this.stopdownspin = function() { ... }
});