Slider Widgetversion 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.
Theming
The slider widget uses the jQuery UI CSS framework to style its look and feel. If slider specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes
option:
-
ui-slider
: The track of the slider control. This element will additionally have a class name ofui-slider-horizontal
orui-slider-vertical
depending on theorientation
option of the slider.-
ui-slider-handle
: One of the slider handles. -
ui-slider-range
: The selected range used when therange
option is set. This element can additionally have a class ofui-slider-range-min
orui-slider-range-max
if therange
option is set to"min"
or"max"
respectively.
-
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
animate
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
2
3
|
|
Get or set the animate
option, after initialization:
1
2
3
4
5
|
|
classes
|
Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes
option.
Initialize the slider with the classes
option specified, changing the theming for the ui-slider
class:
1
2
3
4
5
|
|
Get or set a property of the classes
option, after initialization, here reading and changing the theming for the ui-slider
class:
1
2
3
4
5
|
|
disabled
false
true
.Initialize the slider with the disabled
option specified:
1
2
3
|
|
Get or set the disabled
option, after initialization:
1
2
3
4
5
|
|
max
100
Initialize the slider with the max
option specified:
1
2
3
|
|
Get or set the max
option, after initialization:
1
2
3
4
5
|
|
min
0
Initialize the slider with the min
option specified:
1
2
3
|
|
Get or set the min
option, after initialization:
1
2
3
4
5
|
|
orientation
"horizontal"
"horizontal"
, "vertical"
.Initialize the slider with the orientation
option specified:
1
2
3
|
|
Get or set the orientation
option, after initialization:
1
2
3
4
5
|
|
range
false
-
Boolean: If set to
true
, the slider will detect if you have two handles and create a styleable 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
2
3
|
|
Get or set the range
option, after initialization:
1
2
3
4
5
|
|
step
1
Initialize the slider with the step
option specified:
1
2
3
|
|
Get or set the step
option, after initialization:
1
2
3
4
5
|
|
value
0
Initialize the slider with the value
option specified:
1
2
3
|
|
Get or set the value
option, after initialization:
1
2
3
4
5
|
|
values
null
range
option is set to true
, the length of values
should be 2.Initialize the slider with the values
option specified:
1
2
3
|
|
Get or set the values
option, after initialization:
1
2
3
4
5
|
|
Methods
destroy()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the destroy method:
1
|
|
disable()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the disable method:
1
|
|
enable()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the enable method:
1
|
|
instance()Returns: Object
Retrieves the slider's instance object. If the element does not have an associated instance, undefined
is returned.
Unlike other widget methods, instance()
is safe to call on any element after the slider plugin has loaded.
- This method does not accept any arguments.
Invoke the instance method:
1
|
|
option( optionName )Returns: Object
Gets the value currently associated with the specified optionName
.
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar"
would get the value of the bar
property on the foo
option.
-
optionNameType: StringThe name of the option to get.
Invoke the method:
1
|
|
option()Returns: PlainObject
- This signature does not accept any arguments.
Invoke the method:
1
|
|
option( optionName, value )Returns: jQuery (plugin only)
Sets the value of the slider option associated with the specified optionName
.
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName
. For example, "foo.bar"
would update only the bar
property of the foo
option.
-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
1
|
|
option( options )Returns: jQuery (plugin only)
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
1
|
|
value()Returns: Number
- This signature does not accept any arguments.
Invoke the method:
1
|
|
value( value )Returns: jQuery (plugin only)
-
valueType: NumberThe value to set.
Invoke the method:
1
|
|
values()Returns: Array
- This signature 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 )Returns: jQuery (plugin only)
Invoke the method:
1
|
|
values( values )Returns: jQuery (plugin only)
-
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
Note: The ui
object is empty but included for consistency with other events.
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.-
eventType: Event
-
uiType: Object
-
handleType: ElementThe HTML element representing the handle being moved.
-
handleIndexType: NumberThe numeric index of the handle being moved.
-
valueType: NumberThe value that the handle will move to if the event is not canceled.
-
valuesType: ArrayAn array of the current values of a multi-handled slider.
-
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
|
|