jQuery UI Slider widget() 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 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 =  
"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("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>