jQuery UI Slider

To get a numeric value within a certain range, the jQuery UI slider is used. In the jQuery UI slider, users can’t enter an invalid value, 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

OR

$(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>

Output 1:

Output 2:

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>

Output:

Explanation:

In the above example, we are displaying 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() {  
            $( "#slide" ).slider({  
orientation: "vertical",                 
range:true,  
               min: 0,  
               max: 50,  
               values: [ 15, 35 ],  
               slide: function( event, ui ) {  
                  $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );  
               }  
           });  
         $( "#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>

Output:

Explanation:

In the above example, we are displaying 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 value is the value to be set for the option.
option(options) To set one or more options for the slider. A map of option-value pairs to be set is specified by the options argument.
value To get the current value of options.value (the slider), but is used only if the slider is unique (if not, use 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({  
               orientation:"vertical"   
            });  
            $( "#slide-1" ).slider('disable');  
            $( "#slide-2" ).slider({  
               orientation:"vertical",  
               value:70,  
               slide: function( event, ui ) {  
                  $( "#mval" ).val( ui.value );  
               }      
            });  
            $( "#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>

Output 1:

Output 2:

Explanation:

In the above example, we are displaying the use and the behavior of the disable() and value() method. Here, the first slider is disabled, while the second is enabled. Both the slider 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.

Please Share