Options
animate
This option when set to true, creates an animated effect when users click directly on the axis. By default its value is false.
This can be of type:
- Boolean − When set to true, the handle will animate with the default duration.
- String −The name of speed such as slow, normal, or fast
- Number −The duration of the animation, in milliseconds.
$( ".selector" ).slider(
{ animate: "fast" }
);
disabled
This option when set to true, disables the slider. By default its value is false
$( ".selector" ).slider(
{ disabled: true }
);
max
This option specifies the upper value of the range that the slider can attain—the value represented when the handle is moved to the far right (for horizontal sliders) or top (for vertical sliders). By default its value is 100.
$( ".selector" ).slider(
{ max: 50 }
);
min
This option specifies the lower value of the range that the slider can attain—the value represented when the handle is moved to the far left (for horizontal sliders) or bottom (for vertical sliders). By default its value is 0.
$( ".selector" ).slider(
{ min: 10 }
);
orientation
This option indicates the horizontal or vertical orientation of the slider. By default its value is horizontal.
$( ".selector" ).slider(
{ "option", "orientation" }
);
range
This option specifies whether the slider represents a range. By default its value is false.
This can be of type
- Boolean − If specified as true, and the slider has exactly two handles, an element that can be styled is created between the handles.
- String −Can be min or max. If specified creates a range element from the handle to the beginning or end of the slider respectively.
$( ".selector" ).slider(
{ range: true }
);
step
This option specifies discrete intervals between the minimum and maximum values that the slider is allowed to represent. By default its value is 1.
$( ".selector" ).slider(
{ step: 2 }
);
values
This option is of type Array and causes multiple handles to be created and specifies the initial values for those handles. This option should be an array of possible values, one for each handle. By default its value is null.
$( ".selector" ).slider(
{ values: [ 20, 25 ] }
);
Methods
destroy
This action destroys the slider functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
$( ".selector" ).slider("destroy");
disable
This action disables the slider functionality. This method does not accept any arguments.
$( ".selector" ).slider("disable");
enable
This action enables the slider functionality. This method does not accept any arguments.
$( ".selector" ).slider("enable");
option( optionName )
This action retrieves the value of the specified param option. This option corresponds to one of those used with slider (options). Where optionName is the name of the option to get.
var isDisabled = $( ".selector" ).slider( "option", "disabled" );
option()
This action gets an object containing key/value pairs representing the current slider options hash.
var options = $( ".selector" ).slider( "option" );
option( optionName, value )
This action sets the value of the slider option associated with the specified optionName. The argument optionName is the name of the option to be set and value is the value to be set for the option.
$( ".selector" ).slider( "option", "disabled", true );
option( options )
This action sets one or more options for the slider. The argument options is a map of option-value pairs to be set.
$( ".selector" ).slider( "option", { disabled: true } );
value
This action retrieves the current value of options.value (the indicator). Use only if the indicator is unique (if not, use slider (“values”)). This signature does not accept any arguments.
$( ".selector" ).slider("value");
value( value )
This action sets the value of the slider.
$( ".selector" ).slider( "value", 55 );
values
This action retrieves the current value of options.values (the value of the sliders in an array). This signature does not accept any arguments.\
var values = $( ".selector" ).slider( "values" );
values( index )
This action gets the value for the specified handle. Where index is of type Integer and is a zero-based index of the handle.
var value = $( ".selector" ).slider( "values", 0 );
values( index, value )
This action sets the value for the specified handle. Where index is the zero-based index of the handle and value is the value to set.
$( ".selector" ).slider( "values", 0, 20 );
values( values )
This action set the value for all handles.
$( ".selector" ).slider( "values", [ 55, 105 ] );
widget
This action returns a jQuery object containing the slider. This method does not accept any arguments.
var widget = $( ".selector" ).slider( "widget" );
Events
change(event, ui)
This event is triggered handle’s value changes, either through user action or programmatically. Where event is of type Event, and ui is of type Object. Possible values of ui are:
- handle − A jQuery object representing the handle that was changed.
- value − The current value of the slider
$( ".selector" ).slider({
change: function( event, ui ) {}
});
create(event, ui)
This event is triggered when the slider is created. Where event is of type Event, and ui is of type Object.
$( ".selector" ).slider({
create: function( event, ui ) {}
});
slide(event, ui)
This event is triggered for mouse move events whenever the handle is being dragged through the slider. Returning false cancels the slide. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- handle − A jQuery object representing the handle being moved.
- value − The value that the handle will move to if the event is not canceled.
- values − An array of the current values of a multi-handled slider.
$( ".selector" ).slider({
slide: function( event, ui ) {}
});
start(event, ui)
This event is triggered when the user starts sliding. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- handle − A jQuery object representing the handle being moved.
- value − The current value of the slider.
$( ".selector" ).slider({
start: function( event, ui ) {}
});
stop(event, ui)
This event is triggered when a slide stops. Where event is of type Event, and ui is of type Object. Possible values of ui are −
- handle − A jQuery object representing the handle that was moved.
- value − The current value of the slider.
$( ".selector" ).slider({
stop: function( event, ui ) {}
});