Open In App

jQuery UI Slider value() Method

Improve
Improve
Like Article
Like
Save
Share
Report

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=
              rel="stylesheet" />
        <script src=
        <script src=
  
        <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=
              rel="stylesheet" />
        <script src=
        <script src=
  
        <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



Last Updated : 03 Dec, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads