ion.RangeSlider is Easy, flexible and responsive range slider with skin support.

Basic Demo

Simple start and customising basic params

Start without params


$("#range_01").ionRangeSlider();
                  

Set min value, max value and start point


$("#range_02").ionRangeSlider({
  min: 100,
  max: 1000,
  from: 550
});
                

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


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

Set up range with negative values


$("#range_04").ionRangeSlider({
  type: "double",
  grid: true,
  min: -1000,
  max: 1000,
  from: -500,
  to: 500
});
            

Set up range with fractional values, using fractional step


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

Set up you own numbers


$("#range_07").ionRangeSlider({
  type: "double",
  grid: true,
  from: 1,
  to: 5,
  values: [0, 10, 100, 1000, 10000, 100000, 1000000]
});
        

One more example with strings


$("#range_09").ionRangeSlider({
  grid: true,
  from: 3,
  values: [
  "January", "February", "March",
  "April", "May", "June",
  "July", "August", "September",
  "October", "November", "December"
  ]
});