QuickNav

Options

animate
disabled
max
min
orientation
range
step
value
values

Methods

destroy
disable
enable
option
value
values
widget

Events

create
start
slide
change
stop

Slider Widgetversion added: 1.5

Description: Drag a handle to select a numeric value.

Options

animateType: Boolean or String or Number

Default: false
Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.
Multiple types supported:
  • 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.

disabledType: Boolean

Default: false
Disables the slider if set to true.

maxType: Number

Default: 100
The maximum value of the slider.

minType: Number

Default: 0
The minimum value of the slider.

orientationType: String

Default: "horizontal"
Determines whether the slider handles move horizontally (min on left, max on right) or vertically (min on bottom, max on top). Possible values: "horizontal", "vertical".

rangeType: Boolean or String

Default: false
Whether the slider represents a range.
Multiple types supported:
  • 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.

stepType: Number

Default: 1
Determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.

valueType: Number

Default: 0
Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.

valuesType: Array

Default: null
This option can be used to specify multiple handles. If the range option is set to true, the length of values should be 2.

Methods

destroy()

Removes the slider functionality completely. This will return the element back to its pre-init state.

disable()

Disables the slider.

enable()

Enables the slider.

option( optionName ) Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.

option() Returns: PlainObject

Gets an object containing key/value pairs representing the current slider options hash.

option( optionName, value )

Sets the value of the slider option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.

option( options )

Sets one or more options for the slider.
  • options
    Type: Object
    A map of option-value pairs to set.

value() Returns: Number

Get the value of the slider.

value( value )

Set the value of the slider.
  • value
    Type: Number
    The value to set.

values() Returns: Array

Get the value for all handles.

values( index ) Returns: Number

Get the value for the specified handle.
  • index
    Type: Integer
    The zero-based index of the handle.

values( index, value )

Set the value for the specified handle.
  • index
    Type: Integer
    The zero-based index of the handle.
  • value
    Type: Number
    The value to set.

values( values )

Set the value for all handles.
  • values
    Type: Array
    The values to set.

widget() Returns: jQuery

Returns a jQuery object containing the slider.

Events

change( event, ui )

Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.
  • event
    Type: Event
  • ui
    Type: Object
    • handle
      Type: jQuery
      The jQuery object representing the handle that was changed.
    • value
      Type: Number
      The current value of the slider.

create( event, ui )

Triggered when the slider is created.

slide( event, ui )

Triggered on every mouse move during slide. The value provided in the event as 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.
  • event
    Type: Event
  • ui
    Type: Object
    • handle
      Type: jQuery
      The jQuery object representing the handle being moved.
    • value
      Type: Number
      The value that the handle will move to if the event is not canceled.
    • values
      Type: Array
      An array of the current values of a multi-handled slider.

start( event, ui )

Triggered when the user starts sliding.
  • event
    Type: Event
  • ui
    Type: Object
    • handle
      Type: jQuery
      The jQuery object representing the handle being moved.
    • value
      Type: Number
      The current value of the slider.

stop( event, ui )

Triggered after the user slides a handle.
  • event
    Type: Event
  • ui
    Type: Object
    • handle
      Type: jQuery
      The jQuery object representing the handle that was moved.
    • value
      Type: Number
      The current value of the slider.

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.

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.

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>slider demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
    <style>#slider { margin: 10px; }  </style>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
</head>
<body>
 
<div id="slider"></div>
 
<script>
$( "#slider" ).slider();
</script>
 
</body>
</html>

Demo: