UI: Components

Number Spinner

Number Spinner is a web component that allows users to select a number from a range of values, using a pair of buttons to increment or decrement the value. For a simpler, non-web-component version, see the basic implementation.

With custom slot

dec inc

Usage

Basic Implementation

<number-spinner
  value="5"
  min="0"
  max="100"
  step="1">
</number-spinner>

Attributes

• value: Initial value (default: 1)
• min: Minimum allowed value (default: 0)
• max: Maximum allowed value (default: 100)
• step: Increment/decrement step value (default: 1)
• name: Input name for form submission
• label: Label text for accessibility
• form: ID of associated form
• styles: Enable default styling

Customization

Use slots to customize button content:

<number-spinner>
  <span slot="dec">−</span>
  <span slot="inc">+</span>
</number-spinner>