TouchSpin Bootstrap 5 - Complete Demo

🎯 TouchSpin Bootstrap 5 - Interactive Demo with ALL Settings

This input demonstrates all 41 TouchSpin configuration options. Use the control panel to test every setting in real-time.

💻 Code Example (Non-Default Settings)

// Code will appear here...

📚 Static Examples

Pre-configured examples showing different TouchSpin configurations.

Currency Input

Vertical Buttons

Min/Max Boundaries

Input Group with Prefix & Postfix (Horizontal)

$ .00

Input Group with Prefix & Postfix (Vertical)

€ .00

Floating Label (Basic)

Amount

Floating Label with Input Group

Price

.00

Floating Label with Vertical Buttons (Basic)

Quantity

Floating Label with Input Group and Vertical Buttons (Advanced)

€

Euro Amount

.00

⚙️ TouchSpin Settings

All 41 Configuration Options

📊 Basic Settings

Value Min Max Step Decimals

🏷️ Prefix & Postfix

Prefix Postfix Prefix Extra Class Postfix Extra Class

🔒 State & Behavior

Input Type

Disabled

Readonly

Focusable Buttons

Mouse Wheel Support

🎨 Button Customization

Button Up Text Button Down Text Button Up Class Button Down Class

Vertical Layout

Vertical Up Text Vertical Down Text Vertical Up Class Vertical Down Class

⚡ Advanced Settings

Force Step Divisibility Step Interval (ms) Step Interval Delay (ms) First Click Value If Empty Replacement Value (when invalid)

🚀 Boost Settings

Enable Boost

Boost At (steps) Max Boosted Step

No Max Boost Limit

🔗 Callback Functions

Before Calculation Called before value changes. Return modified value or false to prevent change. After Calculation Called after value changes. Return display value (doesn't affect internal value).

🔧 API Method Testing

📊 Event Monitor