jQuery UI Slider

To get a numeric value within a certain range, the jQuery UI slider is used. Users can’t enter an invalid value in the jQuery UI slider, thus holding an advantage over text input. Any value picked with the slider is valid.

Syntax:

The slider() method can be used in two forms:

$(selector, context).slider (options) Method

$(selector, context).slider (“action”, params) Method

First Method: The slider (options) method:

To specify that an HTML element should be managed as a slider, the slider (options) method is used. The appearance and behavior of the slider are specified by the “options” parameter which is an object.

Syntax:

$(selector, context).slider (options)

Multiple options can also be used at a time using a JavaScript object. For this, they need to be separated using a comma.

Syntax:

$(selector, context).slider({option1: value1, option2: value2..... });

The various options that can be used with this method are listed below:

Option	Uses
animate	To create an animated effect when users click directly on the axis when set to true. The default value is false.
disabled	To disable the slider, when set to true. The default value is false.
max	To define the upper value of the range that the slider can attain. The value is specified when the handle is moved to the far right (for horizontal sliders) or top (for vertical sliders). The default value is 100.
min	To define the lower value of the range that the slider can attain. The value is specified when the handle is moved to the far left (for horizontal sliders) or bottom (for vertical sliders). The default value is 0.
orientation	To define the horizontal or vertical orientation of the slider. The default value is horizontal.
range	To define whether the slider represents a range. The default value is false.
step	To define discrete intervals between the minimum and maximum values that the slider is allowed to represent. The default value is 1.
value	To define the initial value of a single-handle slider. It is used to specify a value for the first handle, in the case of multiple handles. The default value is 1.
values	To cause multiple handles to be created and to define the initial values for those handles. It is of type array. It should be an array of possible values, one for each handle. The default value is null.

Example 1:

<!doctype html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slide" ).slider();
});
</script>
</head>
<body>
<h3>Slide Me!!</h3>
<!-- HTML -->
<div id="slide"></div>
</body>
</html>

Explanation:

In the above example, we are displaying the slider functionality. Here, we are passing no parameters to the slider() method.

Example 2:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slide" ).slider({
value: 30,
animate:"slow",
orientation: "vertical"
});
});
</script>
</head>
<body>
<!-- HTML -->
<h3>Slide Me!!</h3>
<div id="slide"></div>
</body>
</html>

Explanation:

In the above example, we display the use and the behavior of the value, animate, and orientation options in the slider function of jQueryUI.

Example 3:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
( "#price" ).val( "( "#slide" ).slider( "values", 0 ) +
" - ( "#slide" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<!-- HTML -->
<p>
<label for="price">Range:</label>
<input type="text" id="price"
style="border:0; color:crimson; font-weight:bold;">
</p>
<div id="slide"></div>
</body>
</html>

Explanation:

In the above example, we display the use and the behavior of range, min, max, and value options in the slider function of jQueryUI.

Second Method: The slider (“action”, params) method:

To act on the slider, the slider (“action”, params) method is used. It is used to perform actions like moving the cursor to a new location. The first argument here is “action” which is specified as a string. For example, to indicate a new value of the cursor, “value” is passed as a value of the action parameter.

Syntax:

$(selector, context).slider ("action", params)

The various actions that can be used with this method are listed below:

Action	Uses
destroy	To destroy the slider functionality of an element completely, so that the elements return to their pre-init state. No argument is accepted by this method.
disable	To disable the slider functionality. No argument is accepted by this method.
enable	To enable the slider functionality. No argument is accepted by this method.
option( optionName )	To get the value of the specified param option, and thus corresponds to one of those used with slider (options). The name of the option to get is specified by the optionName parameter.
option	To retrieve an object containing key/value pairs representing the current slider options hash.
option( optionName, value )	To set the value of the slider option associated with the specified optionName. The name of the option to be set is specified by the optionName parameter and the value is the value to be set for the option.
option(options)	To set one or more options for the slider. The options argument specifies a map of option-value pairs to be set.
value	To get the current value of options.value (the slider), but is used only if the slider is unique (if not, use the slider (“values”)). No argument is accepted by this method.
value(value)	To set the value of the slider.
values	To get the current value of options.values (the value of the sliders in an array). No argument is accepted by this method.
values(index)	To retrieve the value for the specified handle. The index parameter is of type integer and is a zero-based index of the handle.
values( index, value )	To set the value for the specified handle. The index parameter is the zero-based index of the handle and the value parameter is the value to set.
values(values)	To set the value for all the handles.
widget	To get a jQuery object containing the slider. No argument is accepted by this method.

Example 4:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider functionality</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
( "#slide-1" ).slider('disable');
( "#mval" ).val( $( "#slide-2" ).slider( "value" ) );
});
</script>
</head>
<body>
<!-- HTML -->
<h3>Disabled Slider:</h3>
<div id="slide-1"></div>
<h3>Enabled Slider:</h3>
<p>
<label for="mval">Value:</label>
<input type="text" id="mval"
style="border:0; color:red; font-weight:bold;">
</p>
<div id="slide-2"></div>
</body>
</html>

Explanation:

In the above example, we display the use and the behavior of the disable() and value() methods. Here, the first slider is disabled, while the second is enabled. Both sliders have a vertical orientation. The default value of the second slider is 70. The value changes accordingly as the slider moves from top to bottom.

Syntax:

First Method: The slider (options) method:

Syntax:

Syntax:

Option

Uses

animate

disabled

max

min

orientation

range

step

value

values

Example 1:

Example 2:

Example 3:

Second Method: The slider (“action”, params) method:

Syntax:

Action

Uses

destroy

disable

enable

option( optionName )

option

option( optionName, value )

option(options)

value

value(value)

values

values(index)

values( index, value )

values(values)

widget

Example 4: