jQuery UI Slider value() Method

Last Updated : 03 Dec, 2021

The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQueryUI provides us a slider control through the slider widget. Slider helps us to get a certain value using a given range. In this article, we will see how to use the value() method in the jQuery UI slider.

The value() method is used to get the current value of the slider. This method has a sub-method called value(value) method, here we can set the value of the slider.

Syntax:

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

$( ".selector" ).slider("value", number);

var a = $( ".selector" ).slider("value", number);

Parameters:

value: it is a number value to be set.
number: it is a number value index on which value is to get.

CDN Link: First, add jQuery UI scripts needed for your project.

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

Example 1: In this example, we have used the value() method to get the slider value on each click.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <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>

        <script>
            $(function () {
                $("#gfg").slider();
                $("#gfg").slider("value");
            });
            function gfgg() {
                var a = $("#gfg").slider("value");
                console.log(a);
            }
        </script>
    </head>

    <body>
        <h1>GeeksforGeeks</h1>
        <h2>jQuery UI | slider value() Method</h2>
        <div id="gfg" onclick="gfgg()"></div>
    </body>
</html>

Output:

Example 2: In this example, we have used value(value) method to set the slider value to get the slider on a particular index, here it is 24.

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <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>

        <script>
            $(function () {
                $("#gfg").slider();
                $("#gfg").slider("value", 24);
            });
            function gfgg() {
                $("#gfg").slider("value");
            }
        </script>
    </head>

    <body>
        <h1>GeeksforGeeks</h1>
        <h2>jQuery UI | slider value(value) Method</h2>
        <div id="gfg" onclick="gfgg()"></div>
    </body>
</html>

Output:

Reference:https://api.jqueryui.com/slider/#method-value

jQuery UI Slider value() Method

taran910

Improve

Article Tags :

jQuery UI Slider value() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?