Overview

Slot Counter shows a number with a slot-machine animation. Each digit rolls like a reel and stops on the right value. It's based on the open-source react-slot-counter library (version 3.0.1).

Place the widget in a data view and select a String or Integer attribute:

- Use Integer for plain numbers, such as 1284905.

- Use String when you want separators, such as 1,284,905 or 12.5.

When the attribute changes, the counter animates to the new value.

All settings are attributes, so you can change them at runtime or leave them empty to use the default. You can set:

- a start value

- the duration and speed

- the direction (bottom-up or top-down)

- your own dummy characters (for example A,B,C)

- a count-up mode

- equal digit width

- a debounce delay

- starting the animation only when the counter scrolls into view

Six class-name settings let you style the container, characters, separators and reels from your theme.

Use it for KPI tiles on a dashboard, live totals such as votes or orders, eye-catching numbers on a landing page, or scores that roll in.

Documentation

Typical usage scenario

Use Slot Counter to make numbers stand out. The value rolls into place like slot-machine reels, and it animates again every time the attribute changes.

Where it helps:

- KPI tiles on a dashboard, such as visitors, orders or revenue

- Live totals that change while the user watches, such as votes or stock levels

- Eye-catching numbers on a landing or result page, started when the user scrolls to them

- Scores or codes that roll in, also with letters as dummy characters

Place the widget in a data view and select a String or Integer attribute. No Java or JavaScript is needed.

Features and limitations

Features:

- Shows a String or Integer attribute with a slot-machine animation, and animates again each time the value changes

- Supports the separators , . and space in String values (for example 1,284,905 or 12.5)

- A start value, with an option to use it only for the first animation

- Duration, speed, delay per column and debounce delay

- Direction: bottom-up (default) or top-down

- Your own dummy characters and the number of dummy characters per reel

- Count-up or count-down mode instead of random characters

- Equal width for all digits and an endless reel option

- Can start the animation when the counter scrolls into view

- Class names for the container, characters, separators, value, reels and numbers, plus a built-in default style

- Large Integer values are shown in full, and the last value stays visible while loading

Limitations:

- Every setting is an attribute; you can't type static values in the widget properties. Use attribute default values or set them in a microflow or nanoflow.

- duration, speed and delay are Integer attributes, so only whole numbers are possible. The defaults (0.7 and 1.4) apply only when the attribute is empty.

- With startValueOnce = false (the default), every change animates from the start value, so all digits spin.

- direction accepts only the exact text top-down; anything else means bottom-up.

- animateOnVisible starts only when the whole counter is visible in the browser window.

- The widget only displays the value; it doesn't change the attribute.

- Web only; native mobile is not supported.

Dependencies

- Mendix Studio Pro 10.24.17 or a later 10.24 version

Installation

1. Download mendix.SlotCounter.mpk from the Marketplace or from the GitHub release Version1.1.0.

2. Copy it into the widgets folder of your app (App > Show App Directory in Explorer).

3. In Studio Pro, press F4 (App > Synchronize App Directory). The widget appears in the Toolbox as Slot Counter.

Configuration

1. Add a String or Integer attribute for the number to an entity.

2. Optionally, add attributes for the settings you need: Boolean for on/off settings, Integer for numbers, String for texts and class names.

3. Place a data view with the entity on a page and drag Slot Counter into it.

4. Select the attribute for Counter Number on the General tab, and attributes for the other settings.

5. To style the counter, add your own CSS classes to the app theme (for example theme/web/main.scss) and put the class names in the class-name attributes. A class name you set replaces the built-in one.

Tip: to make only the changed digits spin on updates, set startValueOnce to true.

Known bugs

No known bugs.

Report issues at https://github.com/bharathidas/Slot-Counter/issues

Frequently Asked Questions

Can I use a Decimal attribute?

No. Counter Number accepts String and Integer attributes. For a decimal number, format it as text in a String attribute, for example 12.50.

Why do all digits spin when only one changed?

With startValueOnce = false (the default), every animation starts from the start value. Set startValueOnce to true so later changes spin only the changed digits.

How do I set a duration of 1.5 seconds?

The duration attribute is an Integer, so only whole seconds are possible. Leave it empty for the default of 0.7 seconds.

The counter doesn't animate on load after upgrading from 1.0. Why?

Your autoAnimationStart attribute is false, and version 1.0 ignored this setting. Leave it empty or set it to true.

Can I use letters while the reels roll?

Yes. Set dummyCharacters to a comma-separated list, for example A,B,C.

The animation never starts with animateOnVisible. Why?

The counter must be fully visible in the browser window. Make sure it isn't cut off or taller than the window.