TouchSpin Vanilla - Complete Demo (RTL)

🎨 Interactive TouchSpin Demo

Adjust the settings in the right panel to see changes in real-time.

💻 Generated Code

Non-default settings only:

// Initializing...

📚 Static Examples

Pre-configured examples showing different TouchSpin configurations.

💰 Currency Example

📊 Vertical Buttons

🎯 Min/Max Boundary

⚙️ Settings & Theming

Configure demo + CSS variables

📊 Value & Range

Initial Value

Minimum

Maximum

Step

Decimal Places

First Click Value (if empty)

Replacement Value (when invalid)

Enable Boost Acceleration

Boostat (acceleration trigger)

Max Boosted Step

🎨 Appearance

Prefix

Postfix

Prefix Extra Class

Postfix Extra Class

🔘 Button Configuration

Button Up Text

Button Down Text

Button Up Class

Button Down Class

Vertical Buttons

Vertical Up Text

Vertical Down Text

Vertical Up Class

Vertical Down Class

⚡ Behavior

Force Step Divisibility

Step Interval (ms)

Step Interval Delay (ms)

Mouse Wheel Support

⌨️ Input Behavior

Focusable Buttons

Disabled

🎨 CSS Variables & Theming

Live theme editor

Copied!

--ts-wrapper-background-color

--ts-wrapper-border-color

--ts-wrapper-focus-border-color

--ts-input-text-color

--ts-input-placeholder-color

--ts-button-background-color

--ts-button-background-color-hover

--ts-button-background-color-active

--ts-button-text-color

--ts-wrapper-border-width

--ts-wrapper-border-radius

--ts-button-down-border-radius

--ts-button-up-border-radius

--ts-input-font-size

--ts-input-padding

--ts-button-padding

--ts-button-min-width

🔧 API Method Testing