Tailwind CSS Toggle Count

Toggle count from one value to another.

Installation

To get started, install Toggle Count plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i @preline/toggle-count

Example

Toggle between monthly to annually pricing options.

Monthly Annual / 15% off

Startup

2 users
Plan features
Product support

Team

Hot

5 users
Plan features
Product support

Enterprise

129

10 users
Plan features
Product support

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                      
                        <div>
                          <div id="toggle-count">
                            <label>
                              Monthly
                              <input id="toggle-count-monthly" name="toggle-count" type="radio" class="hidden">
                            </label>
                            <label>
                              Annual
                              <input id="toggle-count-annual" name="toggle-count" type="radio" class="hidden" checked/>
                            </label>
                          </div>
                        </div>
                        
                        <div class="space-x-5">
                          <span data-hs-toggle-count='{
                              "target": "#toggle-count",
                              "min": 19,
                              "max": 29
                            }'>
                            19
                          </span>
                          
                          <span data-hs-toggle-count='{
                              "target": "#toggle-count",
                              "min": 89,
                              "max": 99
                            }'>
                            89
                          </span>

                          <span data-hs-toggle-count='{
                              "target": "#toggle-count",
                              "min": 129,
                              "max": 149
                            }'>
                            129
                          </span>
                        </div>

JavaScript behavior

Options

Name	Description	Options	Default value
`data-hs-toggle-count`	Activate a Toggle Count by specifying on an element.	—	—
`:target` (required)	Determines which element will be observed. This must be a valid selector.	string	—
`:min`	Specifies default number.	number	`0`
`:max`	Specifies the number to which the count up will go.	number	`0`
`:duration`	Counting speed (animation).	number	`700`

Methods

The HSToggleCount object is contained within the global window object

Method	Description
Public methods
`countUp()`	Force count up.
`countDown()`	Force count down.
Static methods
`HSToggleCount.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`

Force count up (public method).

                      
                        const toggleCount = new HSToggleCount(document.querySelector('#toggle-count'));
                        const countUpBtn = document.querySelector('#count-up-btn');

                        countUpBtn.addEventListener('click', () => {
                          toggleCount.countUp();
                        });

Force count up (mixed).

                      
                        const { element } = HSToggleCount.getInstance('#toggle-count', true);
                        const countUpBtn = document.querySelector('#count-up-btn');

                        countUpBtn.addEventListener('click', () => {
                          element.countUp();
                        });

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Dismiss