Tailwind CSS Toggle Count Plugin API

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.

1. Install the plugin

   Install @preline/toggle-count via npm

   Terminal

                             
                               npm i @preline/toggle-count
                             
                           

2. Add the plugin CSS

   @import the plugin's CSS file into your Tailwind CSS file.

   main.css

                             
                               @import "tailwindcss";
                               
                               /* @preline/toggle-count */
                               /* [!code highlight:1] */
                               @import "./node_modules/@preline/toggle-count/theme.css";
                             
                           

3. Add the plugin JavaScript

   Include the JavaScript <script> that powers the interactive elements near the end of your </body> tag:

   HTML

   <script src="./node_modules/@preline/toggle-count/index.js"></script>

   ---

   Additional Initialization Options

   Use the non-auto entry if you need manual initialization. In this mode, automatic initialization on page load is not included, so the component should be initialized explicitly.

   HTML (non-auto)

   <script type="module"> // [!code highlight:3] import HSToggleCount from "@preline/toggle-count/non-auto.mjs"; new HSToggleCount(document.querySelector("#toggle-count")); </script>

   ---

   Via bundler

   When using a bundler (Vite, webpack, etc.), import the plugin directly as an ES module.

   JavaScript (auto)

                             
                               import "@preline/toggle-count";
                             
                           

   JavaScript (non-auto)

                             
                               import HSToggleCount from "@preline/toggle-count/non-auto";
                               
                               HSToggleCount.autoInit();
                               
                               // Or initialize a specific element manually
                               const el = document.querySelector("#toggle-count");
                               if (el) new HSToggleCount(el);
                             
                           

Example

Toggle between monthly to annually pricing options.

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>
                      
                    

Methods

The HSToggleCount object is contained within the global window object

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

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

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

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

Ready to use Components

Toggle Count

Explore ready-to-use Tailwind CSS examples built with Preline UI.

View Toggle Count examples