jQuery Slider plugin View project on GitHub

jQuery Slider is easy to use and multifunctional jQuery plugin that supports any webkit based touch mobile devices such as iPhone/iPod/iPad and Android. Below you can find demos and documentation.


Slider placed in string
with
skin.


Demos


{
  from: 5,
  to: 50,
  step: 2.5,
  round: 1,
  format: { format: '##.0', locale: 'de' },
  dimension: ' €'
}


Notice!

New option format. Check docs and usage on http://code.google.com/p/jquery-numberformatter/ 


{
  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>'
}


Notice!

That half of the slider here is just 1/5 of whole slider — this is what heterogeneity for. 


{
  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 );
  },
  onstatechange: function( value ){
    console.dir( this );
  }
}


Documentation


Basic functions

$(".selector").slider()
Get inner slider object
$(".selector").slider("value")
Get values scope
$(".selector").slider("value", p1, p2)
Set values of the pointers p1 & p2
$(".selector").slider("prc")
Get percentage values scope
$(".selector").slider("prc", p1, p2)
Set percentage values of the pointers p1 & p2
$(".selector").slider("calculatedValue")
Get values scope from "calculate" function
$(".selector").slider("skin", skin)
Set slider skin

Build options

from number
Left limit
to number
Right limit
step number
Step of pointer
round number
How many numbers allowed after comma
format object
How to format numbers, readme for how to use
heterogeneity array
[percentage of point on slider]/[value in that point]
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 it 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.

View project on GitHub Download jQuery Slider



License

(MIT License) — Copyright © 2012 Egor Khmelev