The slider function in Jquery UI can be used to select numeric data as an input from the user. Slider has many applications on a webpage like using it for volume control, color selector, controlling the size and resolutions of various images, etc. We will use the CDN link in code to add different libraries and styles. To display this slider like any other jQuery UI widget, we have to link to jQuery and jQuery UI. Copy this code inside your HTML file to link the file to jquery and jquery UI through CDN(Content Delivery Network). Here we have used google’s CDN but you can also use jquery or Microsoft’s CDN
<link href=’https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css’rel=’stylesheet’>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
After connecting to jQuery UI we can now use the slider function on our webpage. Just like any other jQuery Code, the slider function is also written inside the script tag in an HTML document.
Below examples will illustrates the jQuery UI Slider
Example:
<!DOCTYPE html> <html> <head> <title>jQuery UI| Slider</title> <link rel="stylesheet" href= <style> h1 { color: green; } div { width: 400px; } </style> </head> <body> <center> <h1>neveropen</h1> <h4>JQuery UI slide</h4> <div id="my_slider"></div> <div id=my_display></div> <script> $(document).ready(function() { $(function() { $("#my_slider").slider({ slide: function(event, ui) { $("#my_display").html(ui.value); } }); }); }) </script> <script src= </script> <script src= </script> </center> </body> </html> |
Output:
Managing different attributes of a slider: We can control different attributes of the slider such as step, orientation, minimum value, maximum value. Below is an example in which we have assigned values to these attributes.
Example:
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href= <script src= </script> <script src= </script> <style> h1 { color: green; } </style> </head> <body> <center> <h1>neveropen</h1> <h4>JQuesry UI slide</h4> <div id="my_slider"></div> <div id=my_display></div> <script> $(document).ready(function() { $(function() { $("#my_slider").slider({ min: 0, max: 100, step: 2, orientation: "vertical", slide: function(event, ui) { $("#my_display").html(ui.value); } }); }); }) </script> </center> </body> </html> |
Output:
Handling events of Slider: Here is an example of three events of a slider, One at the start of the slider second when slider is on move and third when the slider stops.We can use our required codes within those events(functions) in our applications.
Example:
<!DOCTYPE html> <html> <head> <title>Handling events of Slider</title> <link rel="stylesheet" href= <style> h1 { color: green; } div { width: 400px; } </style> </head> <body> <center> <h1>neveropen</h1> <h4>JQuesry UI slide</h4> <div id=my_display_event></div> <br> <br> <div id="my_slider"></div> <div id=my_display></div> <script> $(document).ready(function() { $(function() { $("#my_slider").slider({ slide: function(event, ui) { $("#my_display").html(ui.value); $("#my_display_event").html('Slider on move...'); }, start: function(event, ui) { $("#my_display_event").html('Slider Started...'); }, stop: function(event, ui) { $("#my_display_event").html('Slider Stopped...'); } }); }); }) </script> <script src= </script> <script src= </script> </center> </body> </html> |
Output:
Selecting a set of numbers using slider:We can also choose a set of numbers by using a start value using a slider and a stop value using another slider.
Example:
<!DOCTYPE html> <html> <head> <title>Handling events of Slider</title> <link rel="stylesheet" href= <style> h1 { color: green; } div { width: 400px; } </style> </head> <body> <center> <h1>neveropen</h1> <h4>JQuesry UI slide</h4> <div id=my_display_event></div> <br> <br> <div id="my_slider"></div> <div id=my_display></div> <script> $(document).ready(function() { $(function() { $("#my_slider").slider({ min: 0, max: 100, values: [10, 30], range: true, slide: function(event, ui) { $("#my_display_start").html("Start value:" + ui.values[0]), $("#my_display_end").html("End value:" + ui.values[1]); } }); }); }) </script> <script src= </script> <script src= </script> </center> </body> </html> |
Output:
Enabling/Disabling a Slider: We can enable or disable the slider by specifying it in the input method. Here in the below example, we use a pair of radio buttons to enable/disable the slider.On click of respective radio button the value is collected(variable name is my_val)and accordingly the status of the slider is set.
Example:
<!DOCTYPE html> <html> <head> <title>Enabling/Disabling a Slider</title> <style> h1 { color: green; } div { width: 400px; } </style> </head> <body> <center> <h1>neveropen</h1> <h4>JQuesry UI slide</h4> <input type=radio name=radio_1 value=enable checked>Enable <input type=radio name=radio_1 value=disable>Disable <br> <div id="my_slider"></div> <div id=my_display></div> <link rel="stylesheet" href= <script src= <script src= <script> $(document).ready(function() { $(function() { $("#my_slider").slider({ slide: function(event, ui) { $("#my_display").html(ui.value); } }); }); ///Reading radio button values using change event// $("input[type='radio']").change(function() { my_val = $("input[name=radio_1]:checked").val() $("#my_slider").slider(my_val); }) }) </script> </center> </body> </html> |
Output
