Logo

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
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo