Slider Widget version added: 1.5
Description: Drag a handle to select a numeric value.
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles and ranges. The handle can be moved with the mouse or the arrow keys.
The slider widget will create handle elements with the class ui-slider-handle
on initialization. You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle
class before initialization. It will only create the number of handles needed to match the length of value
/values
. For example, if you specify values: [ 1, 5, 18 ]
and create one custom handle, the plugin will create the other two.
Dependencies
Additional Notes:
- This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
Options
animateType: Boolean or String or Number
false
- Boolean: When set to
true
, the handle will animate with the default duration. - String: The name of a speed, such as
"fast"
or"slow"
. - Number: The duration of the animation, in milliseconds.
Initialize the slider with the animate option specified:
1 |
|
Get or set the animate option, after initialization:
1 2 3 4 5 |
|
disabledType: Boolean
false
true
.Initialize the slider with the disabled option specified:
1
|
|
Get or set the disabled option, after initialization:
1
2
3
4
5
|
|
maxType: Number
100
Initialize the slider with the max option specified:
1
|
|
Get or set the max option, after initialization:
1
2
3
4
5
|
|
minType: Number
0
Initialize the slider with the min option specified:
1
|
|
Get or set the min option, after initialization:
1
2
3
4
5
|
|
orientationType: String
"horizontal"
"horizontal"
, "vertical"
.Initialize the slider with the orientation option specified:
1
|
|
Get or set the orientation option, after initialization:
1
2
3
4
5
|
|
rangeType: Boolean or String
false
- Boolean: If set to
true
, the slider will detect if you have two handles and create a stylable range element between these two. - String: Either
"min"
or"max"
. A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.
Initialize the slider with the range option specified:
1 |
|
Get or set the range option, after initialization:
1 2 3 4 5 |
|
stepType: Number
1
Initialize the slider with the step option specified:
1
|
|
Get or set the step option, after initialization:
1
2
3
4
5
|
|
valueType: Number
0
Initialize the slider with the value option specified:
1
|
|
Get or set the value option, after initialization:
1
2
3
4
5
|
|
valuesType: Array
null
range
option is set to true
, the length of values
should be 2.Initialize the slider with the values option specified:
1
|
|
Get or set the values option, after initialization:
1
2
3
4
5
|
|
Methods
destroy()
-
This method does not accept any arguments.
Invoke the destroy method:
1
|
|
disable()
-
This method does not accept any arguments.
Invoke the disable method:
1
|
|
enable()
-
This method does not accept any arguments.
Invoke the enable method:
1
|
|
option( optionName )Returns: Object
optionName
.-
optionNameType: StringThe name of the option to get.
Invoke the method:
1
|
|
option()Returns: PlainObject
-
This method does not accept any arguments.
Invoke the method:
1
|
|
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
1
|
|
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
1
|
|
value()Returns: Number
-
This method does not accept any arguments.
Invoke the method:
1
|
|
value( value )
-
valueType: NumberThe value to set.
Invoke the method:
1
|
|
values()Returns: Array
-
This method does not accept any arguments.
Invoke the method:
1
|
|
values( index )Returns: Number
-
indexType: IntegerThe zero-based index of the handle.
Invoke the method:
1
|
|
values( index, value )
Invoke the method:
1
|
|
values( values )
-
valuesType: ArrayThe values to set.
Invoke the method:
1
|
|
widget()Returns: jQuery
jQuery
object containing the slider.-
This method does not accept any arguments.
Invoke the widget method:
1
|
|
Events
change( event, ui )Type: slidechange
value
method.Initialize the slider with the change callback specified:
1
2
3
|
|
Bind an event listener to the slidechange event:
1
|
|
create( event, ui )Type: slidecreate
Initialize the slider with the create callback specified:
1
2
3
|
|
Bind an event listener to the slidecreate event:
1
|
|
slide( event, ui )Type: slide
ui.value
represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.Initialize the slider with the slide callback specified:
1
2
3
|
|
Bind an event listener to the slide event:
1
|
|
start( event, ui )Type: slidestart
Initialize the slider with the start callback specified:
1
2
3
|
|
Bind an event listener to the slidestart event:
1
|
|
stop( event, ui )Type: slidestop
Initialize the slider with the stop callback specified:
1
2
3
|
|
Bind an event listener to the slidestop event:
1
|
|
Example:
A simple jQuery UI Slider.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
|