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

James Jones
Application Developer
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