jQuery Slider is easy to use and multifunctional jQuery plugin. Below you can find demos and documentation.

If you have any suggestions, comments or just found a bug – please do not hesitate to write.

Download sources&examples (54Kb)

{
  from: 5,
  to: 50,
  step: 2.5,
  round: 1,
  dimension: ' €'
}

{
  from: 5000,
  to: 150000,
  heterogeneity: ['50/50000'],
  step: 1000,
  dimension: ' $'
}

{
  from: 0,
  to: 500,
  heterogeneity: ['50/100', '75/250'],
  scale: [0, '|', 50, '|' , '100', '|', 250, '|', 500],
  limits: false,
  step: 1,
  dimension: '&nbsp;m<small>2</small>'
}

{
  from: 1,
  to: 30,
  heterogeneity: ['50/5', '75/15'],
  scale: [1, '|', 3, '|', '5', '|', 15, '|', 30],
  limits: false,
  step: 1,
  dimension: '',
  skin: "blue"
}

{
  from: 480,
  to: 1020,
  step: 15,
  dimension: '',
  scale: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
  limits: false,
  calculate: function( value ){
    var hours = Math.floor( value / 60 );
    var mins = ( value - hours*60 );
    return (hours < 10 ? "0"+hours : hours) + ":" + ( mins == 0 ? "00" : mins );
  }
}

Documentation

• from — [number] left limit
• to — [number] right limit
• step — [number] step of pointer
• round — [number] how many numbers after comma
• heterogeneity — [array] (percentage of place)/(value of place)
• dimension — [string] show this after number
• limits — [boolean] show or not limits
• scale — [array] labels under slider, ‘|’ — show just line
• skin — [string] if you define new skin, just write here his name, in sources defined blue skin for example
• calculate — [function(value)] function to calculate final numbers, for example time.
• onstatechange — [function(value)] function fires while slider change state.
• callback — [function(value)] function fires on “mouseup” event.

Do not forget to set absolute or true relative path for png in jslider.ie6.css and jslider.ie6.[skin].css