Touchspin - Basic

by Behseini

HTML

<script src="http://anthonyterrien.com/js/jquery.knob.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<div class="container">
   <div class="error">

   </div>

   <table>
      <tr>
         <th >Saviangs</th>
         <th>Savings</th>
      </tr>
      <tr>
         <td><input class="spiner" id="val1" type="text" value="0" name="demo1" data-limitn="-4" data-limitp="2" readonly /><div class="hidee"></div></td>
         <td><input class="spiner" id="val1" type="text" value="0" name="demo1" data-limitn="-4" data-limitp="2" readonly /><div class="hidee"></div></td>
         <td><input class="spiner" id="val1" type="text" value="0" name="demo1" data-limitn="-4" data-limitp="2" readonly /><div class="hidee"></div></td>
      </tr>
      <tr>
         <td><input class="spiner" id="val1" type="text" value="0" name="demo1" data-limitn="-4" data-limitp="2" readonly /><div class="hidee"></div></td>
         <td><input class="spiner" id="val1" type="text" value="0" name="demo1" data-limitn="-4" data-limitp="2" readonly /><div class="hidee"></div></td>
         <td><input class="spiner" id="val1" type="text" value="0" name="demo1" data-limitn="-4" data-limitp="2" readonly /><div class="hidee"></div></td>
      </tr>
   </table>
   
   <script>
   /*
 *  Bootstrap TouchSpin - v4.2.5
 *  A mobile and touch friendly input spinner component for Bootstrap 3 & 4.
 *  http://www.virtuosoft.eu/code/bootstrap-touchspin/
 *
 *  Made by István Ujj-Mészáros
 *  Under Apache License v2.0 License
 */
(function(factory) {
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    module.exports = function(root, jQuery) {
      if (jQuery === undefined) {
        if (typeof window !== 'undefined') {
          jQuery = require('jquery');
       ...

CSS

body{
   padding:50px;
}
td, th{

   position: relative;
}
td{
   padding:6px;
}
.error{
   min-height:110px;
   padding:0px;
}
.btn-primary{
   border: 2px #93504C solid;
   border-radius: 0 2px 2px 0;
   color: #93504C;
   width: 35px;
   height: 35px;
   text-align: center;
   font-family: Lato;
   font-weight: 700;
   background:transparent;
   -webkit-transition: all 0.1s linear;
   transition: all 0.1s linear;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus,
.btn-primary.active:focus,{
   border: 2px #93504C solid;
   color: #fff;
   background:#93504C;


}
input{
   letter-spacing:1px !important;
   text-align:center!important;
   height:35px !important;
   background:transparent !important;
   border-left: 0px !important;
   border-right: 0px !important;
   border-top: 2px #93504C solid !important;
   border-bottom: 2px #93504C solid !important;
}

.col-md-2{

   position:relative;

}
.cover{
   position:absolute;
   background:rgba(0,0,0,.4);
   left:0;
   right:0;
   margin-left:15px;
   height:   33px;
   z-index:100;
   display:none;
}
.box{
   position:absolute;

}
.m{
   transition: background-color 0.5s ease;
}
.hidee{
   
   background:rgba(255,255,255,0.9);
   position:absolute;
   left:0px;
   right:0px;
   top:0px;
   bottom:0px;
   z-index:100;
   transition: background-color 0.5s ease;
   display:none; 

}

JavaScript

let prescriptionOK = false;


$("input[name='demo1']").TouchSpin({
  min: -2,
  max: 2.25,
  step: 0.25,
  decimals: 2
});






$("input[name='demo1']").on("change", function () {
   prescriptionOK = true;
   $("input[name='demo1']").next().find('button').prop('disabled', false);
   $("input[name='demo1']").prev().find('button').prop('disabled', false);
   $('.error').html('');
 $('.hidee').hide('slow');
});
$("input[name='demo1']").on("touchspin.on.max", function () {
   prescriptionOK = false;
   $('.error').html('<div class="alert alert-warning" role="alert">  A simple warning alert—check it out!</div>');
   $("input[name='demo1']").next().find('button').prop('disabled', true);
   // $('.m').addClass('hidee');
   // $(this).parent().parent().find('.m').removeClass('hidee');
   $('.hidee').show('slow');
   $(this).parent().parent().find('.hidee').hide('slow');
});

$("input[name='demo1']").on("touchspin.on.min", function () {
   prescriptionOK = false;
  $("input[name='demo1']").prev().find('button').prop('disabled', true);
  $('.error').html('<div class="alert alert-warning" role="alert">  A simple warning alert—check it out!</div>');
   $('.hidee').show();
   $(this).parent().parent().find('.hidee').hide();

});