Logo

Bootstrap Touchspin

Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

Search Job

Job Management System
Stockholm-icons / General / Search Created with Sketch.
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Media / Rec Created with Sketch.

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="40" 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="30" 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="40" 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="40" 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.

User Profile 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo