- Plugins
- Toggle Count
Plugins
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>
Methods
The HSToggleCount
object is contained within the global window
object
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