Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

ion Range Slider Examples


							<div class="card card-custom">
								<div class="card-header">
									<h3 class="card-title">
										ion Range Slider Examples
									</h3>
								</div>
								<!--begin::Form-->
								<form class="form">
									<div class="card-body">
										<div class="form-group row mb-13">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Basic Example</label>
											<div class="col-lg-8 col-md-9 col-sm-12">
												<div class="ion-range-slider">
													<input type="hidden" id="kt_slider_1"/>
												</div>
											</div>
										</div>
										<div class="form-group row  mb-13">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Min & Max Values</label>
											<div class="col-lg-8 col-md-9 col-sm-12">
												<input type="hidden" id="kt_slider_2"/>
												<div class="ion-range-slider">
													<input type="hidden" id="kt_slider_2"/>
												</div>
											</div>
										</div>
										<div class="form-group row  mb-13">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Custom Prefix</label>
											<div class="col-lg-8 col-md-9 col-sm-12">
												<div class="ion-range-slider">
													<input type="hidden" id="kt_slider_3"/>
												</div>
												<div class="form-text text-muted mt-5">
													Set type to double and specify range, also showing grid and adding prefix "$"
												</div>
											</div>
										</div>
										<div class="form-group row  mb-13">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Range & Step</label>
											<div class="col-lg-8 col-md-9 col-sm-12">
												<div class="ion-range-slider">
													<input type="hidden" id="kt_slider_4"/>
												</div>
												<div class="form-text text-muted mt-5">
													Set up range with negative values
												</div>
											</div>
										</div>
										<div class="form-group row  mb-13">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Fractional Range & Step</label>
											<div class="col-lg-8 col-md-9 col-sm-12">
												<div class="ion-range-slider">
													<input type="hidden" id="kt_slider_5"/>
												</div>
												<div class="form-text text-muted mt-5">
													Set up range with fractional values, using fractional step
												</div>
											</div>
										</div>
										<div class="form-group row  mb-13">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Using Postfixes</label>
											<div class="col-lg-8 col-md-9 col-sm-12">
												<div class="ion-range-slider">
													<input type="hidden" id="kt_slider_6"/>
												</div>
											</div>
										</div>
										<div class="form-group row  mb-12">
											<label class="col-form-label text-right col-lg-3 col-sm-12">Using Text</label>
											<div class="col-lg-8 col-md-9 col-sm-12">
												<div class="ion-range-slider">
													<input type="hidden" id="kt_slider_7"/>
												</div>
											</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>
						

						// Class definition

						var KTIONRangeSlider = function () {

							// Private functions
							var demos = function () {
								// basic demo
								$('#kt_slider_1').ionRangeSlider();

								// min & max values
								$('#kt_slider_2').ionRangeSlider({
									min: 100,
									max: 1000,
									from: 550
								});

								// custom prefix
								$('#kt_slider_3').ionRangeSlider({
									type: "double",
									grid: true,
									min: 0,
									max: 1000,
									from: 200,
									to: 800,
									prefix: "$"
								});

								// range & step
								$('#kt_slider_4').ionRangeSlider({
									type: "double",
									grid: true,
									min: -1000,
									max: 1000,
									from: -500,
									to: 500
								});

								// fractional step
								$('#kt_slider_5').ionRangeSlider({
									type: "double",
									grid: true,
									min: -12.8,
									max: 12.8,
									from: -3.2,
									to: 3.2,
									step: 0.1
								});

								// using postfixes
								$('#kt_slider_6').ionRangeSlider({
									type: "single",
									grid: true,
									min: -90,
									max: 90,
									from: 0,
									postfix: "°"
								});

								// using text
								$('#kt_slider_7').ionRangeSlider({
									type: "double",
									min: 100,
									max: 200,
									from: 145,
									to: 155,
									prefix: "Weight: ",
									postfix: " million pounds",
									decorate_both: true
								});

							}

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

						jQuery(document).ready(function() {
							KTIONRangeSlider.init();
						});
						
Set type to double and specify range, also showing grid and adding prefix "$"
Set up range with negative values
Set up range with fractional values, using fractional step

Quick Actions finance & reports

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