JqueryUI - Slider

A slider is used whenever a numeric value within a certain range is to be obtained. The advantage of a slider over text input is that it becomes impossible for the user to enter a bad value. Any value that they can pick with the slider is valid.

jQueryUI provides us a slider control through slider widget. jQueryUI provides slider() method changes the appearance of HTML elements in the page, adding new CSS classes that give them the appropriate style.

Syntax

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

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

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

Syntax

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

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

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

The following table lists the different options that can be used with this method −

Sr.No. Option & Description
1 animate

This option when set to true, creates an animated effect when users click directly on the axis. By default its value is false.

Option - 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.

Syntax

$( ".selector" ).slider(
   { animate: "fast" }
);
2 disabled

This option when set to true, disables the slider. By default its value is false.

Option - disabled

This option when set to true, disables the slider. By default its value is false.

Syntax

$( ".selector" ).slider(
   { disabled: true }
);
3 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.

Option - 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.

Syntax

$( ".selector" ).slider(
   { max: 50 }
);
4 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.

Option - 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.

Syntax

$( ".selector" ).slider(
   { min: 10 }
);
5 orientation

This option indicates the horizontal or vertical orientation of the slider. By default its value is horizontal.

Option - orientation

This option indicates the horizontal or vertical orientation of the slider. By default its value is horizontal.

Syntax

$( ".selector" ).slider(
   { "option", "orientation" }
);
6 range

This option specifies whether the slider represents a range. By default its value is false.

Option - 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.

Syntax

$( ".selector" ).slider(
   { range: true }
);
7 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.

Option - 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.

Syntax

$( ".selector" ).slider(
   { step: 5 }
);
8 value

This option specifies the initial value of a single-handle slider. If there are multiple handles (see the values options), specifies the value for the first handle. By default its value is 1.

Option - value

>This option specifies the initial value of a single-handle slider. If there are multiple handles (see the values options), specifies the value for the first handle. By default its value is 1.

Syntax

$( ".selector" ).slider(
   { value: 10 }
);
9 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.

Option - 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.

Syntax

$( ".selector" ).slider(
   { values: [ 10, 25 ] }
);

The following section will show you a few working examples of slider functionality.

Default Functionality

The following example demonstrates a simple example of slider functionality, passing no parameters to the slider() method.

<!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() {
            $( "#slider-1" ).slider();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-1"></div>
   </body>
</html>

Let us save the above code in an HTML file sliderexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example, it is a basic horizontal slider and has a single handle that can be moved with the mouse or by using the arrow keys.

Use of value, animate, and orientation

The following example demonstrates the usage of three options (a) value (b) animate and, (c) 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 = "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() {
            $( "#slider-2" ).slider({
               value: 60,
               animate:"slow",
               orientation: "horizontal"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-2"></div>
   </body>
</html>

Let us save the above code in an HTML file sliderexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example the value of slider i.e the initial value is set as 60, hence you see the handle at initial value of 60. Now just click directly on the axis and see the animation effect.

Use of Range, Min, Max and Values

The following example demonstrates the usage of three options (a) range, (b) min, (c) max, and (d) 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 = "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() {
            $( "#slider-3" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               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:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-3"></div>
   </body>
</html>

Let us save the above code in an HTML file sliderexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In the above example we have set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.

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

The slider ("action", params) method allows an action on the slider, such as moving the cursor to a new location. The 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.

Syntax

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

The following table lists the different actions that can be used with this method −

Sr.No. Action & Description
1 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.

Action - 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.

Syntax

$( ".selector" ).slider("destroy");
2 disable

This action disables the slider functionality. This method does not accept any arguments.

Action - disable

This action disables the slider functionality. This method does not accept any arguments.

Syntax

$( ".selector" ).slider("disable");
3 enable

This action enables the slider functionality. This method does not accept any arguments.

Action - enable

This action enables the slider functionality. This method does not accept any arguments.

Syntax

$( ".selector" ).slider("enable");
4 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.

Action - 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.

Syntax

var isDisabled = $( ".selector" ).slider( "option", "disabled" );
5 option()

This action gets an object containing key/value pairs representing the current slider options hash.

Action - option()

This action gets an object containing key/value pairs representing the current slider options hash.

Syntax

var options = $( ".selector" ).slider( "option" );
6 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.

Action - 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.

Syntax

$( ".selector" ).slider( "option", "disabled", true );
7 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.

Action - 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.

Syntax

$( ".selector" ).slider( "option", { disabled: true } );
8 value

This action retrieves the current value of options.value (the slider). Use only if the slider is unique (if not, use slider ("values")). This signature does not accept any arguments.

Action - 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.

Syntax

$( ".selector" ).slider("value");
9 value( value )

This action sets the value of the slider.

Action - value( value )

This action sets the value of the slider.

Syntax

$( ".selector" ).slider( "value", 55 );
10 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.

Action - 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.

Syntax

var values = $( ".selector" ).slider( "values" );
11 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.

Action - 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.

Syntax

var value = $( ".selector" ).slider( "values", 0 );
12 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.

Action - 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.

Syntax

$( ".selector" ).slider( "values", 0, 55 );
13 values( values )

This action sets the value for all the handles.

Action - values( values )

This action sets the value for all the handles.

Syntax

$( ".selector" ).slider( "values", [ 55, 105 ] );
14 widget

This action returns a jQuery object containing the slider. This method does not accept any arguments.

Action - widget

This action returns a jQuery object containing the slider. This method does not accept any arguments.

Syntax

var widget = $( ".selector" ).slider( "widget" );

Example

Now let us see an example using the actions from the above table. The following example demonstrates the use of disable() and value() method.

<!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() {
            $( "#slider-4" ).slider({
               orientation:"vertical"	
            });
            $( "#slider-4" ).slider('disable');
            $( "#slider-5" ).slider({
               orientation:"vertical",
               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:#b9cd6d; font-weight:bold;">
      </p>
      <div id = "slider-5"></div>
   </body>
</html>

Let us save the above code in an HTML file sliderexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

In the above example, the first slider is disabled and the second slider the value is set to 50.

Event Management on slider elements

In addition to the slider (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −

Sr.No. Event Method & Description
1 change(event, ui)

This event is triggered handle’s value changes, either through user action or programmatically.

Event - 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.

Syntax

$( ".selector" ).slider({
   change: function( event, ui ) {}
});
2 create(event, ui)

This event is triggered when the slider is created.

Event - create(event, ui)

This event is triggered when the slider is created. Where event is of type Event, and ui is of type Object.

Syntax

$( ".selector" ).slider({
   create: function( event, ui ) {}
});
3 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.

Event - 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.

Syntax

$( ".selector" ).slider({
   slide: function( event, ui ) {}
});
4 start(event, ui)

This event is triggered when the user starts sliding.

Event - 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.

Syntax

$( ".selector" ).slider({
   start: function( event, ui ) {}
});
5 stop(event, ui)

This event is triggered when a slide stops.

Event - 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.

Syntax

$( ".selector" ).slider({
   stop: function( event, ui ) {}
});

Example

The following example demonstrates the event method usage during slider functionality. This example demonstrates the use of events start, stop, change and slide.

<!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() {
            $( "#slider-6" ).slider({
               range:true,
               min: 0,
               max: 500,
               values: [ 35, 200 ],
               start: function( event, ui ) {
                  $( "#startvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               stop: function( event, ui ) {
                  $( "#stopvalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               change: function( event, ui ) {
                  $( "#changevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               },
               slide: function( event, ui ) {
                  $( "#slidevalue" )
                     .val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
               }
           });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "slider-6"></div>
      <p>
         <label for = "startvalue">Start:</label>
         <input type = "text" id = "startvalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "stopvalue">Stop:</label>
         <input type = "text" id = "stopvalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "changevalue">Change:</label>
         <input type = "text" id = "changevalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
      <p>
         <label for = "slidevalue">Slide:</label>
         <input type = "text" id = "slidevalue" 
            style = "border:0; color:#b9cd6d; font-weight:bold;">
      </p>
   </body>
</html>

Let us save the above code in an HTML file sliderexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

Advertisements