Skip to content
Related Articles

Related Articles

jQuery UI Slider widget() Method

Improve Article
Save Article
Like Article
  • 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 slider widget. Slider helps us to get a certain value using a given range. In this article we will see how to use widget Method in jQuery UI slider. The widget Method is used to returns a jQuery object containing the slider.

Syntax:

var a = $( ".selector" ).slider("widget");

Parameters: This method does not accept any parameter.

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

<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: In this example, we will be using the widget method that will return a jquery object.

HTML




<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <link href
            rel = "stylesheet" />
      <script src
     </script>
      <script src
     </script>
  
      <script>
         $(function() {
            $( "#gfg" ).slider();
               $( "#gfg" ).slider("value");
         });
         function gfgg(){
            var a = $( "#gfg" ).slider("widget");
            console.log(a)
         }
      </script>
   </head>
     
   <body>
      <h1>GeeksforGeeks</h1
      <h2>jQuery UI | slider widget method</h2>
      <div id = "gfg" onclick="gfgg()"></div>
   </body>
</html>

Output:

Reference: https://api.jqueryui.com/spinner/#method-widget


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!