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'):
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 init. 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.
$("#slider").slider();
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider { margin: 10px; }
</style>
<script>
$(document).ready(function() {
$("#slider").slider();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
This event is triggered when the user starts sliding.
start event as an init option.
$( ".selector" ).slider({
start: function(event, ui) { ... }
});start event by type: slidestart.
$( ".selector" ).bind( "slidestart", function(event, ui) {
...
});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.
slide event as an init option.
$( ".selector" ).slider({
slide: function(event, ui) { ... }
});slide event by type: slide.
$( ".selector" ).bind( "slide", function(event, ui) {
...
});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.
change event as an init option.
$( ".selector" ).slider({
change: function(event, ui) { ... }
});change event by type: slidechange.
$( ".selector" ).bind( "slidechange", function(event, ui) {
...
});This event is triggered when the user stops sliding.
stop event as an init option.
$( ".selector" ).slider({
stop: function(event, ui) { ... }
});stop event by type: slidestop.
$( ".selector" ).bind( "slidestop", function(event, ui) {
...
});Remove the slider functionality completely. This will return the element back to its pre-init state.
Disable the slider.
Enable the slider.
Get or set any slider option. If no value is specified, will act as a getter.
Set multiple slider options at once by providing an options object.
Returns the .ui-slider element.
Gets or sets the value of the slider. For single handle sliders.
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 jquery.ui.slider.css stylesheet that can be modified. These classes are highlighed in bold below.
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>.