Wednesday, 3 May 2017

Bootstrap Touchspin

Introduction


Bootstrap Touchspin is something that benefits and easy to use concept when working with value or numeric input . An example below shows how we increase / decrease user salary inside form bootstrap.

<div class="form-group">
    <label class="col-sm-2 control-label" >Salary</label>
    <div class="col-sm-10">
        <input id="demo1" type="text" value="0" class="form-control"           data-min="0" data-step="1.0" data-decimals="2" data-prefix="$" 
          style="display: block;">
    </div>
</div>

Example Script

  <script>
            $("input[name='demo1']").TouchSpin({
                min: 0,
                max: 10000,
                step: 1.0,
                decimals: 2,
                boostat: 5,
                maxboostedstep: 10,
                postfix: '$'
            });
        </script>

The use / meaning 


  • value = initial value to be displayed
  • data-min = minimum data that allowed 
  • data-decimals = shows the number of decimals
  • data-prefix = set the symbol of currency or any logical symbol


Reference 


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

No comments:

Post a Comment