jQuery UI 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.

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.handle: DOMElement - the current focused handle
ui.value: Integer - the current handle's value

Dependencies

UI Core

A simple jQuery UI Slider.

$("#slider").slider();

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
    #slider { margin: 10px; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider();
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="slider"></div>

</body>
</html>

animate

Type:

Boolean

Default:

false

Whether to slide handle smoothly when user click outside handle on the bar.
Code examples
Initialize a slider with the animate option specified.
```
$('.selector').slider({ animate: true });
```
Get or set the animate option, after init.
```
//getter
var animate = $('.selector').slider('option', 'animate');
//setter
$('.selector').slider('option', 'animate', true);
```
max

Type:

Number

Default:

100

The maximum value of the slider.
Code examples
Initialize a slider with the max option specified.
```
$('.selector').slider({ max: 7 });
```
Get or set the max option, after init.
```
//getter
var max = $('.selector').slider('option', 'max');
//setter
$('.selector').slider('option', 'max', 7);
```
min

Type:

Number

Default:

0

The minimum value of the slider.
Code examples
Initialize a slider with the min option specified.
```
$('.selector').slider({ min: -7 });
```
Get or set the min option, after init.
```
//getter
var min = $('.selector').slider('option', 'min');
//setter
$('.selector').slider('option', 'min', -7);
```
orientation

Type:

String

Default:

'auto'

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'.
Code examples
Initialize a slider with the orientation option specified.
```
$('.selector').slider({ orientation: 'vertical' });
```
Get or set the orientation option, after init.
```
//getter
var orientation = $('.selector').slider('option', 'orientation');
//setter
$('.selector').slider('option', 'orientation', 'vertical');
```
range

Type:

Boolean, String

Default:

false

If set to true, the slider will detect if you have two handles and create a stylable range element between these two. Two other possible values are 'min' and '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 a slider with the range option specified.
```
$('.selector').slider({ range: 'min' });
```
Get or set the range option, after init.
```
//getter
var range = $('.selector').slider('option', 'range');
//setter
$('.selector').slider('option', 'range', 'min');
```
step

Type:

Number

Default:

1

Determines the size or amount of each interval or step the slider takes between min and max. The full specified value range of the slider (max - min) needs to be evenly divisible by the step.
Code examples
Initialize a slider with the step option specified.
```
$('.selector').slider({ step: 5 });
```
Get or set the step option, after init.
```
//getter
var step = $('.selector').slider('option', 'step');
//setter
$('.selector').slider('option', 'step', 5);
```
value

Type:

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 a slider with the value option specified.
```
$('.selector').slider({ value: 37 });
```
Get or set the value option, after init.
```
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
```
values

Type:

Array

Default:

null

This option can be used to specify multiple handles. If range is set to true, the length of 'values' should be 2.
Code examples
Initialize a slider with the values option specified.
```
$('.selector').slider({ values: [1,5,9] });
```
Get or set the values option, after init.
```
//getter
var values = $('.selector').slider('option', 'values');
//setter
$('.selector').slider('option', 'values', [1,5,9]);
```

start

Type:

slidestart

This event is triggered when the user starts sliding.
Code examples
Supply a callback function to handle the start event as an init option.
```
$('.selector').slider({
   start: function(event, ui) { ... }
});
```
Bind to the start event by type: slidestart.
```
$('.selector').bind('slidestart', function(event, ui) {
  ...
});
```
slide

Type:

slide

This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider('value', index) to get another handles' value.
Return false in order to prevent a slide, based on ui.value.
Code examples
Supply a callback function to handle the slide event as an init option.
```
$('.selector').slider({
   slide: function(event, ui) { ... }
});
```
Bind to the slide event by type: slide.
```
$('.selector').bind('slide', function(event, ui) {
  ...
});
```
change

Type:

slidechange

This event is triggered on slide stop, or if the value is changed programmatically (by the value method). Takes arguments event and ui. Use event.orginalEvent to detect whether the value changed by mouse, keyboard, or programmatically. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(this).slider('values', index) to get another handle's value.
Code examples
Supply a callback function to handle the change event as an init option.
```
$('.selector').slider({
   change: function(event, ui) { ... }
});
```
Bind to the change event by type: slidechange.
```
$('.selector').bind('slidechange', function(event, ui) {
  ...
});
```
stop

Type:

slidestop

This event is triggered when the user stops sliding.
Code examples
Supply a callback function to handle the stop event as an init option.
```
$('.selector').slider({
   stop: function(event, ui) { ... }
});
```
Bind to the stop event by type: slidestop.
```
$('.selector').bind('slidestop', function(event, ui) {
  ...
});
```

destroy

Signature:

.slider( 'destroy' )

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

Signature:

.slider( 'disable' )

Disable the slider.
enable

Signature:

.slider( 'enable' )

Enable the slider.
option

Signature:

.slider( 'option' , optionName , [value] )

Get or set any slider option. If no value is specified, will act as a getter.
value

Signature:

.slider( 'value' , [value] )

Gets or sets the value of the slider. For single handle sliders.
values

Signature:

.slider( 'values' , index , [value] )

Gets or sets the values of the slider. For multiple handle or range sliders.

The jQuery UI Slider plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample markup with jQuery UI CSS Framework classes

Note: This is a sample of markup generated by the slider plugin, not markup you should use to create a slider. The only markup needed for that is <div><div>.

jQuery UI Slider

Overview

Dependencies

Example

Options

animate

Code examples

max

Code examples

min

Code examples

orientation

Code examples

range

Code examples

step

Code examples

value

Code examples

values

Code examples

Events

start

Code examples

slide

Code examples

change

Code examples

stop

Code examples

Methods

destroy

disable

enable

option

value

values

Theming

Sample markup with jQuery UI CSS Framework classes