← 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
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
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
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
Utility-first styling with Tailwind CSS classes for complete customization.
- Tailwind utility classes
- Customizable design tokens
- Modern component styling
- Method testing panel
Pure CSS styling with CSS custom properties for easy theming.
- Framework-agnostic
- CSS custom properties
- Live CSS variable editor
- Minimal dependencies
🔌 Integration Examples
Different ways to integrate TouchSpin into your projects
Traditional jQuery plugin with bundled renderers for Bootstrap 3, 4, and 5.
- $.fn.TouchSpin() API
- Self-contained bundles
- Legacy compatibility
- Multiple Bootstrap versions
Native web component with declarative HTML API and attribute binding.
- <touchspin-input> element
- Declarative attributes
- Shadow DOM encapsulation
- Framework-agnostic
💡 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.