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.

                          
                            <div class="flex justify-center mb-6">
                              <div id="toggle-count" class="p-1 inline-block bg-white rounded-lg dark:bg-gray-800">
                                <label for="toggle-count-monthly" class="relative inline-block py-2 px-3">
                                  <span class="inline-block relative z-10 text-sm font-medium text-gray-800 cursor-pointer dark:text-gray-200">
                                    Monthly
                                  </span>
                                  <input id="toggle-count-monthly" name="toggle-count" type="radio" class="absolute top-0 end-0 w-full h-full border-transparent bg-transparent bg-none text-transparent rounded-lg cursor-pointer before:absolute before:inset-0 before:w-full before:h-full before:rounded-lg checked:before:bg-gray-200 checked:bg-none focus:ring-transparent dark:checked:before:bg-gray-800">
                                </label>
                                <label for="toggle-count-annual" class="relative inline-block py-2 px-3">
                                  <span class="inline-block relative z-10 text-sm font-medium text-gray-800 cursor-pointer dark:text-gray-200">
                                    Annual / 15% off
                                  </span>
                                  <input id="toggle-count-annual" name="toggle-count" type="radio" class="absolute top-0 end-0 w-full h-full border-transparent bg-transparent bg-none text-transparent rounded-lg cursor-pointer before:absolute before:inset-0 before:w-full before:h-full before:rounded-lg checked:before:bg-gray-200 checked:bg-none focus:ring-transparent dark:checked:before:bg-gray-800" checked/>
                                </label>
                              </div>
                            </div>
                            
                            <!-- Grid -->
                            <div class="grid sm:grid-cols-3 lg:items-center bg-white rounded-xl divide-x divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
                              <!-- Card -->
                              <div class="flex flex-col p-4">
                                <h4 class="text-gray-800 mb-1 dark:text-gray-200">Startup</h4>
                                <div class="flex gap-x-1">
                                  <span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
                                  <p data-hs-toggle-count='{
                                      "target": "#toggle-count",
                                      "min": 19,
                                      "max": 29
                                    }' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
                                    19
                                  </p>
                                </div>

                                <ul class="mt-5 space-y-2 text-sm">
                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      2 users
                                    </span>
                                  </li>

                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      Plan features
                                    </span>
                                  </li>

                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      Product support
                                    </span>
                                  </li>
                                </ul>

                                <button type="button" class="mt-4 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
                                  Get started
                                </button>
                              </div>
                              <!-- End Card -->

                              <!-- Card -->
                              <div class="flex flex-col p-4">
                                <div class="flex justify-between">
                                  <h4 class="text-gray-800 mb-1 dark:text-gray-200">Team</h4>
                                  <div>
                                    <span class="inline bg-violet-500 font-medium text-white text-[.6125rem] leading-4 uppercase rounded-md py-1 px-2">
                                      Hot
                                    </span>
                                  </div>
                                </div>
                                <div class="flex gap-x-1">
                                  <span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
                                  <p data-hs-toggle-count='{
                                      "target": "#toggle-count",
                                      "min": 89,
                                      "max": 99
                                    }' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
                                    89
                                  </p>
                                </div>

                                <ul class="mt-5 space-y-2 text-sm">
                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      5 users
                                    </span>
                                  </li>

                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      Plan features
                                    </span>
                                  </li>

                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      Product support
                                    </span>
                                  </li>
                                </ul>

                                <button type="button" class="mt-4 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
                                  Get started
                                </button>
                              </div>
                              <!-- End Card -->

                              <!-- Card -->
                              <div class="flex flex-col p-4">
                                <h4 class="text-gray-800 mb-1 dark:text-gray-200">Enterprise</h4>
                                <div class="flex gap-x-1">
                                  <span class="text-xl font-normal text-gray-800 dark:text-gray-200">$</span>
                                  <p data-hs-toggle-count='{
                                      "target": "#toggle-count",
                                      "min": 129,
                                      "max": 149
                                    }' class="text-gray-800 font-semibold text-3xl dark:text-gray-200">
                                    129
                                  </p>
                                </div>

                                <ul class="mt-5 space-y-2 text-sm">
                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      10 users
                                    </span>
                                  </li>

                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      Plan features
                                    </span>
                                  </li>

                                  <li class="flex items-center space-x-2">
                                    <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                                    <span class="text-gray-500">
                                      Product support
                                    </span>
                                  </li>
                                </ul>

                                <button type="button" class="mt-4 py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
                                  Get started
                                </button>
                              </div>
                              <!-- End Card -->
                            </div>
                            <!-- End Grid -->

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 Toggle Count