jQRangeSlider demo

Float values

min
max
Range limit
min:
max:
Wheel mode
Wheel speed
Arrows
Value labels
Binding

Code

// default constructor
$("#element").rangeSlider();

// Equivalent to
$("#element").rangeSlider({
  defaultValues:{min:20, max:50},
  bounds:{min:0, max:100},
  wheelMode: null,
  wheelSpeed: 8,
  arrows: true,
  valueLabels: "show",
  formatter: function(value){return Math.round(value)},
  durationIn: 0,
  durationOut: 400,
  delayOut: 200,
  range: {min: false, max: false}
});

Dates

min
max
Range limit
min:
max:
Wheel mode
Wheel speed
Arrows
Value labels
Binding

Code

// default constructor
$("#element").dateRangeSlider();

// Equivalent to
$("#element").dateRangeSlider({
  defaultValues:{min:new Date(2010,1,111), max:new Date(2011,1,11)},
  bounds:{min:new Date(2010,0,1), max:new Date(2012,0,1)},
  wheelMode: null,
  wheelSpeed: 8,
  arrows: true,
  valueLabels: "show",
  formatter: function(value){
    var month = value.getMonth() + 1;
    var day = value.getDate();
    return "" + value.getFullYear() + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day);
  },
  durationIn: 0,
  durationOut: 400,
  delayOut: 200,
  range: {min: false, max: false}
});