jQuery UI Slider

jQuery UI slider is used to obtain a numeric value within a certain range. The main advantage of slider over text input is that it becomes impossible for the users to enter an invalid value. Every value they can pick with the slider is valid.

Syntax:

You can use the slider () method in two forms:

First Method

The slider (options) method specifies that an HTML element should be managed as a slider. Here the options parameter is an object that specifies the appearance and behavior of slider.

You can use one or more options at a time using JavaScript object. In the case of more than one options you have to separate them using a comma as follows:

Following is a list of different options that can be used with this method.

Option	Description
animate	If you set this option as true, it creates an animated effect when users click directly on the axis. By default its value is false.
disabled	If you set this option as true, it disables the slider. By default its value is false.
max	This option is used to specify 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.
min	This option is used to specify 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.
orientation	This option specifies the horizontal or vertical orientation of the slider. By default its value is horizontal.
range	This option indicates whether the slider represents a range. By default its value is false.
step	This option is used to specify discrete intervals between the minimum and maximum values that the slider is allowed to represent. By default its value is 1.
value	This option is used to specify the initial value of a single-handle slider. In the case of multiple handles (see the values options), it specifies the value for the first handle. By default its value is 1.
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.

jQueryUI slider() example 1

Let's take a simple example to demonstrate the slider functionality, passing no parameters to the slider() method.

<!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="../code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="../code.jquery.com/jquery-1.10.2.js"></script>
      <script src="../code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() {
            $( "#slider-1" ).slider();
         });
      </script>
   </head>
   <body>
      <!-- HTML --> 
      <div id="slider-1"></div>
   </body>

<!-- Mirrored from www.javatpoint.com/jquery-ui-slider by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 21 Jun 2016 08:25:22 GMT -->
</html>

Test it Now

jQueryUI slider() example 2

Use of value, animate and orientation:

Let's take an example to demonstrate the usage of options value, animate and orientation in the slider function of jQueryUI.

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

Test it Now

jQueryUI slider() example 3

Use of range, min, max and values:

The following example shows the usage of options range, min, max, and values in the slider function of jQueryUI.

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

Test it Now

Second Method

The slider ("action", params) method specifies an action on the slider, such as moving the cursor to a new location. This action is specified as a string in the first argument (e.g., "value" to indicate a new value of the cursor). Check out the actions that can be passed, in the following table.

Following is a list of different actions that can be used with this method:

Action	Description
destroy	This action is used to destroy the slider functionality of an element completely. The elements return to their pre-init state. This method does not accept any arguments.
disable	This action is used to disable the slider functionality. This method does not accept any arguments.
enable	This action is used to enable the slider functionality. This method does not accept any arguments.
option( optionName )	This action is used to retrieve the value of the specified param option. This option corresponds to one of those used with slider (options). Here optionName is the name of the option to get.
option	This action gets an object containing key/value pairs representing the current slider options hash.
option( optionName, value )	This action sets the value of the slider option associated with the specified optionName. The argument optionName is name of the option to be set and value is the value to be set for the option.
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.
value	This action is used to retrieve the current value of options.value (the slider). It is used only if the slider is unique (if not, use slider ("values")). This signature does not accept any arguments.
value(value)	This action is used to set the value of the slider.
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.
values(index)	This action gets the value for the specified handle. Here index is of type integer and is a zero-based index of the handle.
values( index, value )	This action sets the value for the specified handle. Here index is the zero-based index of the handle and value is the value to set.
values(values)	This action sets the value for all the handles.
widget	This action returns a jQuery object containing the slider. This method does not accept any arguments.

jQueryUI slider() example 4

Let's take an example to demonstrate the actions from the above table. In this example, we are using disable () and value () method.

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

Test it Now

Next TopicjQuery UI Spinner

← prev next →

jQuery

jQuery UI Tutorial

jQuery Interactions

jQuery Widgets

jQuery Effects

Interview Questions

jQuery UI Slider

First Method

jQueryUI slider() example 1

jQueryUI slider() example 2

jQueryUI slider() example 3

Second Method

jQueryUI slider() example 4