1. Plugins
  2. Toggle Count

Plugins

Tailwind CSS Toggle Count

Toggle count from one value to another.

Toggle Count

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.

Startup

$

19

  • 2 users
  • Plan features
  • Product support

Team

Hot
$

89

  • 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>
                      
                    

Data Options

Name Description Options Default value
data-hs-toggle-count Activate a Toggle Count by specifying on an element. Should be added to the container.
: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.

Plugins UI Mockups
Check out Preline UI Components