slow-numbers

slowNumbers

Demo page

npm install slow-numbers

Version 2: npm + TypeScript without jQuery

The package is built from TypeScript and exposes types through the types field.

import slowNumbers from 'slow-numbers';

const counter = slowNumbers('.js-result', {
  start: 1000,
  format: true
});

counter.update({
  end: 5000,
  slowSpeed: 5,
  format: true
});

You can also work directly with an element:

import { SlowNumber } from 'slow-numbers';

const element = document.querySelector('.js-result');

if (element) {
  const counter = new SlowNumber(element, { start: 1000 });
  counter.update({ end: 5000 });
  counter.stop();
}

Browser Usage

<script src="js/slowNumbers.js"></script>

Initial Setup

Use this when the counter should start from a specific number on page load instead of 0.

document.addEventListener('DOMContentLoaded', () => {
  const counter = slowNumbers(selector, {
    start: 1000
  });
});

Updating the Number

counter.update({
    end: 5000
});

Optional Parameters

counter.update({
    format: true, // Splits 10000000 into 10 000 000
    slowSpeed: 5 // Slowdown speed: higher values make the animation slower
});

Stopping the Animation

counter.stop();