jQuery UI Spinner widget() Method

Last Updated : 03 Dec, 2021

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. jQueryUI spinner widget helps us to increment and decrement values of input element using up and down arrow. In this article we will see how to use widget method in jQuery UI slider. The widget method returns the spinner widget element in the jQuery UI spinner.

Syntax:

$(".selector").spinner("widget");

Approach:

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:

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>

    <style type = "text/css">
      #gfg input {width: 100px}
    </style>

    <script>
      $(function() {
        $("#gfg").spinner();
        $('button').button();

        var a = $("#gfg").spinner('widget');
        console.log(a)
      });
    </script>
  </head>

  <body>
    <h1>GeeksforGeeks</h1> 
    <h2>jQuery UI spinner widget method</h2> 
    <input id = "gfg" />
  </body>

</html>

Output:

T

taran910

Improve

Article Tags :

Similar Reads

jQuery Tutorial

jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc

Imagine browsing a website and being able to submit a form, load new content, or update information without having to refresh the entire page. That's the magic of AJAX. Asynchronous JavaScript and XML (AJAX) is a web development technique that allows web pages to communicate with a web server asynch

Top 50+ jQuery Interview Questions and Answers - 2025

jQuery, a fast and lightweight JavaScript library, has been a game-changer in simplifying front-end web development known for its simplicity, ease of use, and cross-browser compatibility. In this article, we will provide the Top 50+ jQuery Interview Questions 2025 tailored for both freshers and expe

JQuery Set the Value of an Input Text Field

Set the value of an input text field in jQuery is useful while working with forms. It is used to add new value to the input text field. In jQuery, there are various methods to set the value of input text fields, these are - val(), prop(), and attr(). These method offers unique capabilities for setti

How to change Selected Value of a Drop-Down List using jQuery?

We will change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. Below are the methods to change the selected value of a dr

Form Validation using jQuery

Form validation is a process of confirming the relevant information entered by the user in the input field. In this article, we will be validating a simple form that consists of a username, password, and a confirmed password using jQuery.Below are the approaches for validation of form using jQuery:T

jQuery Introduction

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java

jQuery UI Date Picker

A date-picker of jQuery UI is used to provide a calendar to the user to select the date from a Calendar. This date picker is usually connected to a text box so user selection of date from the calendar can be transferred to the textbox. You need to add the below CDN to your HTML document to use it. C

How to change the Background Color after Clicking the Button in JavaScript?

Changing the background color after clicking a button in JavaScript involves attaching a click event listener to the button. When the button is clicked, it triggers a function that changes the background color of a specific element (like the page or a section of it).This creates a simple and interac

jQuery ajax() Method

The jQuery ajax() method is used to perform asynchronous HTTP requests, allowing you to load data from a server without reloading the webpage. It provides a flexible way to interact with remote servers using GET, POST, or other HTTP methods, supporting various data formats.Syntax:$.ajax({name:value,