Bootstrap 4 Advanced Components : Bootstrap Touchspin input spinner

Bootstrap 4 Advanced Components : Bootstrap Touchspin, an input spinner for BS4

by djibe89

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.css">
<link rel="stylesheet" href="https://daemonite.github.io/material/css/material.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://daemonite.github.io/material/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row mt-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Input spinner for Bootstrap 4 - Advanced Components</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4 + Daemonite Material Design + Bootstrap touchspin)</span>
        <p>
          NB. Use type="text" on the input so the webbrowser doesn't set its own built-in spinners.
          <p>
            <h2>Setup</h2>
            <ol>
              <li>Download <a href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin" target="_blank">Bootstrap Touchpsin plugin for Bootstrap 4</a>
                <li>Add these lines to your html<br>
                  <code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.css"><br>
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-touchspin/4.2.5/jquery.bootstrap-touchspin.min.js"></code>
                  <li>Set a unique ID on your input
                    <li>Initialize Touchspin in Javascript<code>$("#demo1").TouchSpin({<br>
  min: 0,<br>
  max: 100,<br>
  step: 0.1,<br>
  decimals: 2,<br>
  boostat: 5,<br>
 ...

CSS

.input-group-btn-vertical .btn {
  min-width: 1.5rem;
}

JavaScript

$("#demo1").TouchSpin({
  min: 0,
  max: 100,
  step: 0.1,
  decimals: 2,
  boostat: 5,
  maxboostedstep: 10,
  postfix: '%'
});
$("#demo2").TouchSpin({
  prefix: '%',
  buttondown_class: "btn",
  buttonup_class: "btn"
});
$("#demo3").TouchSpin({
  verticalbuttons: true
});
$("#demo4").TouchSpin();
$("#demo5, #demo6").TouchSpin({
  initval: 40
});
$("#demo7").TouchSpin({
  postfix: "a button",
  postfix_extraclass: "btn btn-sm btn-secondary"
});
$("#demo8").TouchSpin({
  postfix: "a button",
  postfix_extraclass: "btn btn-lg btn-secondary"
});
$("#demo9").TouchSpin({
  buttondown_class: "btn btn-link",
  buttonup_class: "btn btn-link"
});