TouchSpin Web Component

Single <touchspin-input> element for all your numeric input needs

No Shadow DOM Framework-Agnostic Easy to Use

Basic Example

Simple numeric input with min/max constraints:

      <touchspin-input

  min="0"

  max="100"

  value="42"

  step="1"

  data-testid="basic-demo"

></touchspin-input>

With Prefix & Postfix

Add labels before and after the input:

      <touchspin-input

  min="0"

  max="1000"

  value="50"

  step="1"

  prefix="$"

  postfix=".00"

  data-testid="currency-demo"

></touchspin-input>

Decimal Values

Support for decimal numbers with precision control:

      <touchspin-input

  min="0"

  max="10"

  value="3.14"

  step="0.01"

  decimals="2"

  data-testid="decimal-demo"

></touchspin-input>

Vertical Buttons

Stack buttons vertically for a compact layout:

      <touchspin-input

  min="0"

  max="100"

  value="25"

  step="5"

  verticalbuttons

  data-testid="vertical-demo"

></touchspin-input>

JavaScript API

Access and control the component programmatically:

      // Access the web component

const component = document.querySelector('#api-example');

const api = component.api;

// Use API methods

api.upOnce();        // Increment

api.downOnce();      // Decrement

api.getValue();      // Get current value

api.setValue(75);    // Set value

// Listen to events

api.on('change', (value) => {

  console.log('Value changed:', value);

});

Simple Integration

Just one custom element - no complex setup required

No Shadow DOM

Works seamlessly with your existing CSS frameworks

Full API Access

Complete programmatic control via JavaScript