Keen | Ion Range Slider

Easy to use, flexible and responsive range slider with skin support.
For more info please visit the plugin's Demo Pageor Github Repo.

ion Range Slider Examples

HTML
JS


       <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();
      });

Basic Example

Min & Max Values

Custom Prefix

Set type to double and specify range, also showing grid and adding prefix "$"

Range & Step

Set up range with negative values

Fractional Range & Step

Set up range with fractional values, using fractional step

Using Postfixes

Using Text

Custom

Layout

features

ion Range Slider

ion Range Slider Examples

Search files, reports, members

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications

Important Notice

System Update

Server Maintenance

DB Migration

System Messages

Notifications

Privacy Settings:

Security Settings:

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9