Logo

Bootstrap Touchspin Examples


       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">Bootstrap Touchspin Examples</h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Minimum Setup</label>
           <div class="col-lg-4 col-md-9 col-sm-12">
            <input id="kt_touchspin_1" type="text" class="form-control" value="55" name="demo0" placeholder="Select time"/>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">With Prefix</label>
           <div class="col-lg-4 col-md-9 col-sm-12">
            <input id="kt_touchspin_2" type="text" class="form-control" value="0" name="demo0" placeholder="Select time"/>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">With Postfix</label>
           <div class="col-lg-4 col-md-9 col-sm-12">
            <input id="kt_touchspin_3" type="text" class="form-control" value="0" name="demo0" placeholder="Select time"/>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Vertical Icons:</label>
           <div class="col-lg-4 col-md-9 col-sm-12">
            <input id="kt_touchspin_4" type="text" class="form-control bootstrap-touchspin-vertical-btn" value="" name="demo0" placeholder="40"/>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Vertical Custom Icons:</label>
           <div class="col-lg-4 col-md-9 col-sm-12">
            <input id="kt_touchspin_5" type="text" class="form-control bootstrap-touchspin-vertical-btn" value="" name="demo0" placeholder="30"/>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-9 ml-lg-auto">
            <button type="reset" class="btn btn-primary mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>
        <!--end::Form-->
       </div>
      

      "use strict";
      // Class definition
      var KTKBootstrapTouchspin = function() {

       // Private functions
       var demos = function() {
        // minimum setup
        $('#kt_touchspin_1, #kt_touchspin_2_1').TouchSpin({
         buttondown_class: 'btn btn-secondary',
         buttonup_class: 'btn btn-secondary',

         min: 0,
         max: 100,
         step: 0.1,
         decimals: 2,
         boostat: 5,
         maxboostedstep: 10,
        });

        // with prefix
        $('#kt_touchspin_2, #kt_touchspin_2_2').TouchSpin({
         buttondown_class: 'btn btn-secondary',
         buttonup_class: 'btn btn-secondary',

         min: -1000000000,
         max: 1000000000,
         stepinterval: 50,
         maxboostedstep: 10000000,
         prefix: '$'
        });

        // vertical button alignment:
        $('#kt_touchspin_3, #kt_touchspin_2_3').TouchSpin({
         buttondown_class: 'btn btn-secondary',
         buttonup_class: 'btn btn-secondary',

         min: -1000000000,
         max: 1000000000,
         stepinterval: 50,
         maxboostedstep: 10000000,
         postfix: '$'
        });

        // vertical buttons with custom icons:
        $('#kt_touchspin_4, #kt_touchspin_2_4').TouchSpin({
         buttondown_class: 'btn btn-secondary',
         buttonup_class: 'btn btn-secondary',
         verticalbuttons: true,
         verticalup: '<i class="ki ki-plus"></i>',
         verticaldown: '<i class="ki ki-minus"></i>'
        });

        // vertical buttons with custom icons:
        $('#kt_touchspin_5, #kt_touchspin_2_5').TouchSpin({
         buttondown_class: 'btn btn-secondary',
         buttonup_class: 'btn btn-secondary',
         verticalbuttons: true,
         verticalup: '<i class="ki ki-arrow-up"></i>',
         verticaldown: '<i class="ki ki-arrow-down"></i>'
        });
       }

       return {
        // public functions
        init: function() {
         demos();
        }
       };
      }();

      jQuery(document).ready(function() {
       KTKBootstrapTouchspin.init();
      });
      

Validation State Examples


       <div class="card card-custom">
        <div class="card-header">
         <h3 class="card-title">Validation State Examples</h3>
        </div>
        <!--begin::Form-->
        <form class="form">
         <div class="card-body">
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Success State</label>
           <div class="col-lg-4 col-md-9 col-sm-12 validate">
            <input id="kt_touchspin_1_validate" type="text" class="form-control is-valid" value="" name="demo0" placeholder="40"/>
            <div class="valid-feedback">Success! You've done it.</div>
            <span class="form-text text-muted">Example help text that remains unchanged.</span>
           </div>
          </div>
          <div class="form-group row">
           <label class="col-form-label text-right col-lg-3 col-sm-12">Error State</label>
           <div class="col-lg-4 col-md-9 col-sm-12 validate">
            <input id="kt_touchspin_2_validate" type="text" class="form-control is-invalid" value="" name="demo2" placeholder="40"/>
            <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
            <span class="form-text text-muted">Example help text that remains unchanged.</span>
           </div>
          </div>
         </div>
         <div class="card-footer">
          <div class="row">
           <div class="col-lg-9 ml-lg-auto">
            <button type="reset" class="btn btn-primary mr-2">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
           </div>
          </div>
         </div>
        </form>
        <!--end::Form-->
       </div>
      

      "use strict";
      // Class definition
      var KTKBootstrapTouchspin = function() {

       // Private functions
       var validationStateDemos = function() {
        // validation state demos
        $('#kt_touchspin_1_validate').TouchSpin({
         buttondown_class: 'btn btn-secondary',
         buttonup_class: 'btn btn-secondary',

         min: -1000000000,
         max: 1000000000,
         stepinterval: 50,
         maxboostedstep: 10000000,
         prefix: '$'
        });

        // vertical buttons with custom icons:
        $('#kt_touchspin_2_validate').TouchSpin({
         buttondown_class: 'btn btn-secondary',
         buttonup_class: 'btn btn-secondary',

         min: 0,
         max: 100,
         step: 0.1,
         decimals: 2,
         boostat: 5,
         maxboostedstep: 10,
        });

        $('#kt_touchspin_3_validate').TouchSpin({
         buttondown_class: 'btn btn-secondary',
         buttonup_class: 'btn btn-secondary',
         verticalbuttons: true,
         verticalupclass: 'ki ki-plus',
         verticaldownclass: 'ki ki-minus'
        });
       }

       return {
        // public functions
        init: function() {
         validationStateDemos();
        }
       };
      }();

      jQuery(document).ready(function() {
       KTKBootstrapTouchspin.init();
      });

      
Success! You've done it.
Example help text that remains unchanged.
Sorry, that username's taken. Try another?
Example help text that remains unchanged.

Select A Demo