## Slider Widget version added: 1.5

Description: Drag a handle to select a numeric value.

## QuickNavExamples

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.

## 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.

Code examples:

Initialize the slider with the animate option specified:

`$(` `".selector"` `).slider({ animate:` `"fast"` `});`

Get or set the animate option, after initialization:

`// getter` `var` `animate = $(` `".selector"` `).slider(` `"option"``,` `"animate"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"animate"``,` `"fast"` `);`

### disabledType: Boolean

Default: `false`
Disables the slider if set to `true`.
Code examples:

Initialize the slider with the disabled option specified:

`$(` `".selector"` `).slider({ disabled:` `true` `});`

Get or set the disabled option, after initialization:

`// getter` `var` `disabled = $(` `".selector"` `).slider(` `"option"``,` `"disabled"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"disabled"``,` `true` `);`

### maxType: Number

Default: `100`
The maximum value of the slider.
Code examples:

Initialize the slider with the max option specified:

`$(` `".selector"` `).slider({ max: 50 });`

Get or set the max option, after initialization:

`// getter` `var` `max = $(` `".selector"` `).slider(` `"option"``,` `"max"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"max"``, 50 );`

### minType: Number

Default: `0`
The minimum value of the slider.
Code examples:

Initialize the slider with the min option specified:

`$(` `".selector"` `).slider({ min: 10 });`

Get or set the min option, after initialization:

`// getter` `var` `min = $(` `".selector"` `).slider(` `"option"``,` `"min"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"min"``, 10 );`

### 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"`.
Code examples:

Initialize the slider with the orientation option specified:

`$(` `".selector"` `).slider({ orientation:` `"vertical"` `});`

Get or set the orientation option, after initialization:

`// getter` `var` `orientation = $(` `".selector"` `).slider(` `"option"``,` `"orientation"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"orientation"``,` `"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.

Code examples:

Initialize the slider with the range option specified:

`$(` `".selector"` `).slider({ range:` `true` `});`

Get or set the range option, after initialization:

`// getter` `var` `range = $(` `".selector"` `).slider(` `"option"``,` `"range"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"range"``,` `true` `);`

### 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.
Code examples:

Initialize the slider with the step option specified:

`$(` `".selector"` `).slider({ step: 5 });`

Get or set the step option, after initialization:

`// getter` `var` `step = $(` `".selector"` `).slider(` `"option"``,` `"step"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"step"``, 5 );`

### 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.
Code examples:

Initialize the slider with the value option specified:

`$(` `".selector"` `).slider({ value: 10 });`

Get or set the value option, after initialization:

`// getter` `var` `value = $(` `".selector"` `).slider(` `"option"``,` `"value"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"value"``, 10 );`

### 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.
Code examples:

Initialize the slider with the values option specified:

`$(` `".selector"` `).slider({ values: [ 10, 25 ] });`

Get or set the values option, after initialization:

`// getter` `var` `values = $(` `".selector"` `).slider(` `"option"``,` `"values"` `);` `// setter` `$(` `".selector"` `).slider(` `"option"``,` `"values"``, [ 10, 25 ] );`

## Methods

### destroy()

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

- This method does not accept any arguments.

Code examples:

Invoke the destroy method:

`$(` `".selector"` `).slider(` `"destroy"` `);`

### disable()

Disables the slider.

- This method does not accept any arguments.

Code examples:

Invoke the disable method:

`$(` `".selector"` `).slider(` `"disable"` `);`

### enable()

Enables the slider.

- This method does not accept any arguments.

Code examples:

Invoke the enable method:

`$(` `".selector"` `).slider(` `"enable"` `);`

### option( optionName )Returns: Object

Gets the value currently associated with the specified `optionName`.

- optionName
  Type: String
  The name of the option to get.

Code examples:

Invoke the method:

`var` `isDisabled = $(` `".selector"` `).slider(` `"option"``,` `"disabled"` `);`

### option()Returns: PlainObject

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

- This method does not accept any arguments.

Code examples:

Invoke the method:

`var` `options = $(` `".selector"` `).slider(` `"option"` `);`

### 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.

Code examples:

Invoke the method:

`$(` `".selector"` `).slider(` `"option"``,` `"disabled"``,` `true` `);`

### option( options )

Sets one or more options for the slider.

- options
  Type: Object
  A map of option-value pairs to set.

Code examples:

Invoke the method:

`$(` `".selector"` `).slider(` `"option"``, { disabled:` `true` `} );`

### value()Returns: Number

Get the value of the slider.

- This method does not accept any arguments.

Code examples:

Invoke the method:

`var` `selection = $(` `".selector"` `).slider(` `"value"` `);`

### value( value )

Set the value of the slider.

- value
  Type: Number
  The value to set.

Code examples:

Invoke the method:

`$(` `".selector"` `).slider(` `"value"``, 55 );`

### values()Returns: Array

Get the value for all handles.

- This method does not accept any arguments.

Code examples:

Invoke the method:

`var` `values = $(` `".selector"` `).slider(` `"values"` `);`

### values( index )Returns: Number

Get the value for the specified handle.

- index
  Type: Integer
  The zero-based index of the handle.

Code examples:

Invoke the method:

`var` `value = $(` `".selector"` `).slider(` `"values"``, 0 );`

### 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.

Code examples:

Invoke the method:

`$(` `".selector"` `).slider(` `"values"``, 0, 55 );`

### values( values )

Set the value for all handles.

- values
  Type: Array
  The values to set.

Code examples:

Invoke the method:

`$(` `".selector"` `).slider(` `"values"``, [ 55, 105 ] );`

### widget()Returns: jQuery

Returns a `jQuery` object containing the slider.

- This method does not accept any arguments.

Code examples:

Invoke the widget method:

`var` `widget = $(` `".selector"` `).slider(` `"widget"` `);`

## Events

### change( event, ui )Type: `slidechange`

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.

Code examples:

Initialize the slider with the change callback specified:

`$(` `".selector"` `).slider({` `` `change:` `function``( event, ui ) {}` `});`

Bind an event listener to the slidechange event:

`$(` `".selector"` `).on(` `"slidechange"``,` `function``( event, ui ) {} );`

### create( event, ui )Type: `slidecreate`

Triggered when the slider is created.

- event
  Type: Event
- ui
  Type: Object

Code examples:

Initialize the slider with the create callback specified:

`$(` `".selector"` `).slider({` `` `create:` `function``( event, ui ) {}` `});`

Bind an event listener to the slidecreate event:

`$(` `".selector"` `).on(` `"slidecreate"``,` `function``( event, ui ) {} );`

### slide( event, ui )Type: `slide`

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.

Code examples:

Initialize the slider with the slide callback specified:

`$(` `".selector"` `).slider({` `` `slide:` `function``( event, ui ) {}` `});`

Bind an event listener to the slide event:

`$(` `".selector"` `).on(` `"slide"``,` `function``( event, ui ) {} );`

### start( event, ui )Type: `slidestart`

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.

Code examples:

Initialize the slider with the start callback specified:

`$(` `".selector"` `).slider({` `` `start:` `function``( event, ui ) {}` `});`

Bind an event listener to the slidestart event:

`$(` `".selector"` `).on(` `"slidestart"``,` `function``( event, ui ) {} );`

### stop( event, ui )Type: `slidestop`

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.

Code examples:

Initialize the slider with the stop callback specified:

`$(` `".selector"` `).slider({` `` `stop:` `function``( event, ui ) {}` `});`

Bind an event listener to the slidestop event:

`$(` `".selector"` `).on(` `"slidestop"``,` `function``( event, ui ) {} );`

## 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.2/themes/base/jquery-ui.css"``>`
`` `<``style``>#slider { margin: 10px; } </``style``>`
`` `<``script` `src``=``"http://code.jquery.com/jquery-1.8.3.js"``></``script``>`
`` `<``script` `src``=``"http://code.jquery.com/ui/1.9.2/jquery-ui.js"``></``script``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"slider"``></``div``>`
`<``script``>`
`$( "#slider" ).slider();`
`</``script``>`
`</``body``>`
`</``html``>`

#### Demo: