jQuery Input Touch-Spinner Plugin For Bootstrap 3/4 – TouchSpin

Form
File Size: 12.66 KB
Views Total: 805 views
Last Update:March 17, 2024
Publish Date: October 03, 2013
Official Website: Go to website
License: MIT
Plugin Author: istvan-ujjmeszaros
Demo    Download

TouchSpin is a jQuery input spinner plugin designed for Bootstrap 3/4. With TouchSpin, users can easily increment or decrement numeric values in input fields by tapping and dragging on mobile devices or using the mouse on desktops. The plugin is highly customizable and includes options for setting the step value, minimum and maximum values, and other settings. It also includes support for decimal values and different currency formats.
TouchSpin is fully compatible with Bootstrap 3/4, making it an ideal solution for developers who are already using the popular front-end framework. The TouchSpin plugin for jQuery is solution for adding input spinners to text fields on a website or application. Developed specifically for Bootstrap 3/4 the plugin is touch-friendly and supports mouse and touch input.
It allows users to easily increase or decrease a value using buttons or by dragging the spinner. The plugin is highly customizable, with options to adjust the step size, minimum and maximum values, and appearance of the spinner buttons. With this plugin, you can enhance the user experience on your website or application by making it easier for users to enter numerical values. The TouchSpin plugin is also responsive and works well on both desktop and mobile devices. It’s easy to integrate with any form on a website or application and comes with clear documentation and examples.

How to use :

Add  jQuery javascript library and jQuery touchSpin plugin on the web page.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="bootstrap-touchspin/bootstrap.touchspin.js"></script>

 Addrequired Twitter’s Bootstrap 3 on the web page.

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<script src="bootstrap/js/bootstrap.min.js"></script>

Create a input field for the spinner wigeht.

<input id="demo" type="text" value="99" name="demo">

Call the plugin with options

$("input[name='demo']").TouchSpin({

  // Minimum value.
  min: 0, 

  // Maximum value.
  max: 100, 

  // Applied when no explicit value is set on the input with the value attribute. 
  // Empty string means that the value remains empty on initialization.
  initval: '',
  replacementval: '',

  // Number of decimal points.
  decimals: 0,

  // none | floor | round | ceil
  forcestepdivisibility: 'round', 

  // Enables the traditional up/down buttons.
  verticalbuttons: false,

  // Class of the up button with vertical buttons mode enabled.
  verticalupclass: 'glyphicon glyphicon-chevron-up',

  // Class of the down button with vertical buttons mode enabled.
  verticaldownclass: 'glyphicon glyphicon-chevron-down',

  // Boost at every nth step.
  boostat: 5, 

  // If enabled, the the spinner is continually becoming faster as holding the button.
  booster: true,

  // Maximum step when boosted.
  maxboostedstep: 10, 

  // Text after the input.
  postfix: '%', 

  // Text before the input.
  prefix: '$', 

  // Extra class(es) for prefix.
  prefix_extraclass: '',

  //  Extra class(es) for postfix.
  postfix_extraclass: '',

  // Incremental/decremental step on up/down change.
  step: 1, 

  // Refresh rate of the spinner in milliseconds.
  stepinterval: 100, 

  // Time in milliseconds before the spinner starts to spin.
  stepintervaldelay: 500,

  //  Enables the mouse wheel to change the value of the input.
  mousewheel: true,

  //  Class(es) of down button.
  buttondown_class: 'btn btn-default',

  //  Class(es) of up button.
  buttonup_class: 'btn btn-default',

  // Text for down button
  buttondown_txt: '-',

  // Text for up button
  buttonup_txt: '+'
  
});

 Callbacks.

$("input").trigger("touchspin.uponce");
$("input").trigger("touchspin.up<a href="https://www.jquerypost.com/category/time-clock/">date</a>settings", {max: 1000});

Done

Thanks for make jQuery plugin is developed by istvan-ujjmeszaros For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v4.7.3
  • v4.7.2
  • v4.7.1
  • v4.7.0
  • v4.6.2
  • v4.6.1
  • v4.6.0
  • v4.5.4
  • v4.5.3
  • v4.5.2
  • v4.5.0
  • v4.4.0
  • v1.0.0
  • 4.3.0
  • 4.2.5
  • 4.2.4
  • 4.2.3
  • 4.2.1
  • 4.2.0
  • 4.1.0
  • 4.0.2
  • 4.0.0
  • 3.1.2
  • 3.1.1
  • 3.1.0
  • 3.0.3
  • 3.0.1
  • 3.0.0
  • 2.8.0
  • 2.7.1

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.