jQuery UI | Slider - GeeksforGeeks

31 Oct, 2019
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 SliderExample:
<!DOCTYPE html><html><head>    <title>jQuery UI| Slider</title>    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">    <style>        h1 {            color: green;        }                  div {            width: 400px;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">        </script>        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">        </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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">    </script>    <style>        h1 {            color: green;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">      <style>        h1 {            color: green;        }                  div {            width: 400px;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">        </script>        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">        </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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">      <style>        h1 {            color: green;        }                  div {            width: 400px;        }    </style></head>  <body>    <center>        <h1>GeeksforGeeks</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="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">        </script>        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">        </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>GeeksforGeeks</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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>        <script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>          <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
jQuery-Misc
jQuery-Propertie
JavaScript
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
JavaScript | Promises
How to filter object array based on attributes?
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?