• advanced forms
  • Toggle Count

advanced forms

Tailwind CSS Toggle Count

The Toggle Count Component simplifies switching between different values, aiding comparison and decision-making on pricing pages.

Require FlyonUI JS
Class Name
Type
Description
switchComponentComponent class for switch.

Basic example

With radio

Basic example of toggle count with radio input.

With switch

Basic example of toggle count with switch(checkbox) input.

Illustrations

Pricing cards

Basic example demonstrates use of toggle count in pricing cards.

Destroy/Reinitialize

new
The destroy method is provided to facilitate the destruction of a toggle count.

Options usage

Duration

Assign the value of the data-toggle-count attribute as an object. Within this object, set the duration option to number to set counting speed(animation). By default, its value is 700.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-toggle-countActivate a Toggle Count by specifying on an element.--
:target (required)Specifies default number.string-
:minSpecifies the target element to copy. The value must be a valid selector.number0
:maxSpecifies the number to which the count up will go.number0
:durationCounting speed (animation).number700

Methods

The HSToggleCount object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
countUp()Force count up.
countDown()Force count down.
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
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.

Method usage

Assign an ID to the button containing the data-toggle-count attribute, as demonstrated in the public method. To explore additional methods, you can copy them into the console.

Force count up (public method).

// This method is used in above example.
const toggleCount = new HSToggleCount(document.querySelector('#toggle-count-method'));
const countUpBtn = document.querySelector('#count-up-method');
const countDownBtn = document.querySelector('#count-down-method');

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

countDownBtn.addEventListener('click', () => {
  toggleCount.countDown();
});

Force count up (mixed).

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

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

Destroy instance.

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

destroyBtn.addEventListener('click', () => {
  element.destroy();
});