jQuery UI Spinner

The jQuery UI Spinner enhancement is a UI widget for adding increment and decrement buttons to an input field. It can be used for numerical input, dates, times, and more.

Features

• Supports keyboard input and mousewheel scrolling
• Configurable settings for precision, step, and range
• Custom display format for the input value
• Internationalization and localization support
• Easy to integrate with other jQuery UI widgets

How to use

Installation

The jQuery UI Spinner library can be downloaded from the official website or installed via package manager (npm or yarn).

npm install jquery-ui-spinner

Initialization

To use the spinner on an input field, you need to initialize it with the jQuery UI Spinner plugin. Here's an example:

HTML:

<input id="spinner" type="text" value="0">

JavaScript:

$('#spinner').spinner({
  min: 0,
  max: 100,
  step: 5
});

This will create a spinner widget for the input field with an initial value of 0, a minimum value of 0, a maximum value of 100, and a step value of 5.

Options

The following options can be configured when initializing the spinner widget:

• min: The minimum allowed value.
• max: The maximum allowed value.
• step: The incremental or decremental steps to take when the user interacts with the spinner.
• numberFormat: The display format for the input value. The default is the current locale's number format, but it can be customized using a format string (e.g., "{value} $").
• page: The incremental or decremental steps to take when the user uses the page-up or page-down keys. By default, it's the same as the step value.
• change: A callback function to be called when the value changes.
• spin: A callback function to be called when the value is incremented or decremented.

Methods

The spinner widget provides several methods for programmatic control:

• value(): Gets or sets the current value of the spinner. If no argument is provided, it returns the current value. If an argument is provided, it sets the current value.
• enable(): Enables the spinner.
• disable(): Disables the spinner.
• widget(): Gets the widget element.
• destroy(): Destroys the spinner and removes all attached events and elements.

Conclusion

The jQuery UI Spinner widget is a versatile and customizable tool for adding increment and decrement buttons to an input field. It supports various input types and can be easily integrated with other jQuery UI widgets. Give it a try to enhance your user interface!