Saturday, September 21, 2019

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:

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

First Method

  1. $(selector, context).slider (options)  
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:
  1. $(selector, context).slider({option1: value1, option2: value2..... });  
Following is a list of different options that can be used with this method.
OptionDescription
animateIf you set this option as true, it creates an animated effect when users click directly on the axis. By default its value is false.
disabledIf you set this option as true, it disables the slider. By default its value is false.
maxThis 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.
minThis 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.
orientationThis option specifies the horizontal or vertical orientation of the slider. By default its value is horizontal.
rangeThis option indicates whether the slider represents a range. By default its value is false.
stepThis 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.
valueThis 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.
valuesThis 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.
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head><meta http-equiv="Content-Type" content="text/html; charset=shift_jis">  
  4.         
  5.       <title>jQuery UI Slider functionality</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.   
  10.       <!-- Javascript -->  
  11.       <script>  
  12.          $(function() {  
  13.             $( "#slider-1" ).slider();  
  14.          });  
  15.       </script>  
  16.    </head>  
  17.    <body>  
  18.       <!-- HTML -->   
  19.       <div id="slider-1"></div>  
  20.    </body>  
  21. </html>  

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.
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI Slider functionality</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- Javascript -->  
  10.       <script>  
  11.          $(function() {  
  12.             $( "#slider-2" ).slider({  
  13.                value: 60,  
  14.                animate:"slow",  
  15.                orientation: "horizontal"  
  16.             });  
  17.          });  
  18.       </script>  
  19.    </head>  
  20.    <body>  
  21.       <!-- HTML -->   
  22.       <div id="slider-2"></div>  
  23.    </body>  
  24. </html>  

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.
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI Slider functionality</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- Javascript -->  
  10.       <script>  
  11.          $(function() {  
  12.             $( "#slider-3" ).slider({  
  13.                range:true,  
  14.                min: 0,  
  15.                max: 500,  
  16.                values: [ 50, 300 ],  
  17.                slide: function( event, ui ) {  
  18.                   $( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );  
  19.                }  
  20.            });  
  21.          $( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +  
  22.             " - $" + $( "#slider-3" ).slider( "values", 1 ) );  
  23.          });  
  24.       </script>  
  25.    </head>  
  26.    <body>  
  27.       <!-- HTML -->   
  28.       <p>  
  29.          <label for="price">Price range:</label>  
  30.          <input type="text" id="price"   
  31.             style="border:0; color:red; font-weight:bold;">  
  32.       </p>  
  33.       <div id="slider-3"></div>  
  34.    </body>  
  35. </html>  

Second Method

  1. $(selector, context).slider ("action", params)  
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:
ActionDescription
destroyThis 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.
disableThis action is used to disable the slider functionality. This method does not accept any arguments.
enableThis 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.
optionThis 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.
valueThis 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.
valuesThis 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.
widgetThis 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.
  1. <!doctype html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI Slider functionality</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- Javascript -->  
  10.       <script>  
  11.          $(function() {  
  12.             $( "#slider-4" ).slider({  
  13.                orientation:"horizontal"   
  14.             });  
  15.             $( "#slider-4" ).slider('disable');  
  16.             $( "#slider-5" ).slider({  
  17.                orientation:"horizontal",  
  18.                value:50,  
  19.                slide: function( event, ui ) {  
  20.                   $( "#minval" ).val( ui.value );  
  21.                }      
  22.             });  
  23.             $( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );  
  24.          });  
  25.       </script>  
  26.    </head>  
  27.    <body>  
  28.       <!-- HTML -->   
  29.          <div id="slider-4"></div>  
  30.          <p>  
  31.             <label for="minval">Minumum value:</label>  
  32.             <input type="text" id="minval"   
  33.                style="border:0; color:red; font-weight:bold;">  
  34.          </p>  
  35.          <div id="slider-5"></div>  
  36.    </body>  
  37. </html>  

at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...