jQuery UI | Slider

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>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=
        </script>
        <script src=
        </script>
    </center>
</body>
  
</html>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>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>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>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=
        </script>
        <script src=
        </script>
    </center>
  
</body>
  
</html>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>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=
        </script>
        <script src=
        </script>
    </center>
  
</body>
  
</html>

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
        <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>

chevron_right


Output



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.