← Back to Examples Index

# 🎛️ TouchSpin Dynamic Examples

Interactive demos with live parameter controls for each renderer

### 📌 About These Examples

Each example page provides an interactive control panel where you can:

- Dynamically change TouchSpin parameters (min, max, step, prefix, postfix, etc.)
- Test different button layouts (horizontal vs vertical)
- Monitor events in real-time
- Test API methods (upOnce, downOnce, setValue, etc.)
- See generated code examples based on current settings

## 🎨 Renderer Examples

Each renderer provides framework-specific styling and DOM structure

### Bootstrap 3

Renderer

Complete interactive demo with ALL 41 TouchSpin configuration options. Test every setting with Bootstrap 3 styling.

- ✨ All 41 TouchSpin settings
- 💻 Live code generation
- 📊 Event monitoring
- 🔧 API method testing

View Demo Source

### Bootstrap 4

Renderer

Complete interactive demo with ALL 41 TouchSpin configuration options. Test every setting with Bootstrap 4 styling.

- ✨ All 41 TouchSpin settings
- 💻 Live code generation
- 📊 Event monitoring
- 🔧 API method testing

View Demo Source

### Bootstrap 5

Renderer

Complete interactive demo with ALL 41 TouchSpin configuration options. Test every setting with Bootstrap 5 styling.

- ✨ All 41 TouchSpin settings
- 💻 Live code generation
- 📊 Event monitoring
- 🔧 API method testing

View Demo Source

### Tailwind CSS

Renderer

Utility-first styling with Tailwind CSS classes for complete customization.

- Tailwind utility classes
- Customizable design tokens
- Modern component styling
- Method testing panel

View Demo Source

### Vanilla (No Framework)

Renderer

Pure CSS styling with CSS custom properties for easy theming.

- Framework-agnostic
- CSS custom properties
- Live CSS variable editor
- Minimal dependencies

View Demo Source

## 🔌 Integration Examples

Different ways to integrate TouchSpin into your projects

### jQuery Plugin

jQuery

Traditional jQuery plugin with bundled renderers for Bootstrap 3, 4, and 5.

- $.fn.TouchSpin() API
- Self-contained bundles
- Legacy compatibility
- Multiple Bootstrap versions

View Demos Source

### Web Component

Component

Native web component with declarative HTML API and attribute binding.

- <touchspin-input> element
- Declarative attributes
- Shadow DOM encapsulation
- Framework-agnostic

View Demo Source

### 💡 Getting Started

Each example page includes:

- Live Demo: Fully functional TouchSpin instances
- Control Panel: Adjust all parameters in real-time
- Event Monitor: See events as they fire
- Code Examples: Generated code based on current settings
- API Testing: Buttons to test all public methods

Pro tip: Open the browser console to see additional debug information and API responses.