jQuery: The Write Less, Do More JavaScript Library

UI/Slider/slider

From jQuery JavaScript Library

Jump to: navigation, search

« Back to UI/Slider

[edit]

slider( options )

Makes a slider from the nodeset supplied by the query.
With this plugin, you can generate sliders with a wide range of options, including multiple handles, callbacks and more.

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

  • ui.instance: jQuery.ui.slider - the internal instance of the slider
  • ui.options: Options - options used to initialize the slider
  • ui.handle: jQuery - the current focused handle
  • ui.value: Integer - the current handle's value
  • ui.range: Integer - the current range value (only with two handles and range: true)
Arguments:
optionsOptions
A set of key/value pairs that configure the slider. All options are optional, but a slider will not be useful without at least one callback.

Options:

NameType
handleStringDefault: ".ui-slider-handle"
The jquery selector to use for the handle(s) of the slider
handlesObject
Specify boundaries for one or more handles. Format: {start:Integer, min:Integer, max:Integer, id:String}. Only start is required. If the slider doesn't have handles already, they are automatically created.
rangeBooleanDefault: false
If set to true, the slider will detect if you have two handles and create a stylable range element between these two. You now also have access to ui.range in your callbacks to get the amount of the range.
minIntegerDefault: 0
The minimum value of the slider. Useful for tracking values via callback, and to set steps.
maxIntegerDefault: 100
The maximum value of the slider. Useful for tracking values via callback, and to set steps.
startValueInteger
The value the handle will have first.
steppingInteger
If defined, the new value has to be dividable through this number, so the slider jumps from step to step.
stepsIntegerDefault: 0
Alternative to stepping, this defines how many steps a slider will have, instead of how many values to jump, as in stepping.
axisString
Normally you don't need to set this option because the plugin detects the slider orientation automatically. If the orientation is not correctly detected you can set this option to 'horizontal' or 'vertical'.
stopFunction
Function that gets called when the user stops sliding.
startFunction
Function that gets called when the user starts sliding.
slideFunction
Function that gets called on every mouse move during slide. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.
changeFunction
Function that gets called on slide stop, but only if the slider position has changed. Takes arguments e and ui, for event and user-interface respectively. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.


[edit]

slider( "moveTo", value, index )

Moves a slider's handle to the given position.
Calling this method moves the specified handle to the given value. If no handle or handle's index/number is specified as second argument, it moves the focused handle.

If you want to increase/decrease the handles' value, you can also input a relative string format, using "+=" or "-=". Example: $(..).slider("moveTo", "+=10") (Increments the current handles' value by 10).

Note also that when using a slider with range: true set in the options, move the second slider handle first as if the first handle is forced to overtake the second, you'll get strange results with minus numbers.
Arguments:

"moveTo"String
valueInteger/String
The value to move the handle to.
indexInteger/Element
The index/number of the handle, zero-based (or alternatively the handle element itself).

[edit]

slider( "value", index )

Retrieves a handle's value.
This method returns a handle's value. If no handle is specified in the second argument by its index, it returns the value of the currently focused handle.
Arguments:
"value"String
indexInteger
The index/number of the handle, zero-based.

[edit]

slider( "disable" )

Temporarily disables the slider.
This method temporarily disables the slider. It can later be reenabled by calling $(..).slider("enable").
Arguments:
"disable"String

[edit]

slider( "enable" )

Enables the slider.
This method re-enables a previously disabled slider.
Arguments:
"enable"String

[edit]

slider( "destroy" )

Completely removes the sliding functionality.
This method removes the sliding functionality completely.
Arguments:
"destroy"String

Retrieved from "http://docs.jquery.com/UI/Slider/slider"