# 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