Touch Spin

Bootstrap TouchSpin

TouchSpin is a jQuery plugin that adds vertical spinner buttons to input fields for numeric values.

Step 1: Install TouchSpin

You can install TouchSpin via yarn or npm.

yarn add bootstrap-touchspin

Step 2: Include CSS & script

Include the TouchSpin CSS and JS files in your project.

<!-- TouchSpin CSS -->
<link href="../assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet">

<!-- TouchSpin JS -->
<script src="../assets/libs/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>

Step 3: Add Input Field

Add a numeric input field with a descriptive ID for TouchSpin.

<!-- TouchSpin input -->
<input class="form-control" id="touch-spin" type="text" value="55">

Step 4: Initialize TouchSpin

Use jQuery to enable TouchSpin on the input field, supporting RTL layouts.

"use strict";

$(function () {
    var isRtl = $("html").attr("dir") === "rtl";
    $("#touch-spin").TouchSpin();
});

For more options, check the Bootstrap TouchSpin documentation.