Logo
Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

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

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