Slot Counter

Content Type: Widget
Categories: Utility

Overview

Slot Counter is a widget that helps you add animated and interactive number displays to your web applications. It's easy to use, works with different types of data, and lets you customize the animations to make your numbers stand out.

Documentation

Demo urlhttps://slotcouter-sandbox.mxapps.io/login.html?profile=Responsive

Slot Counter is a widget that helps you add animated and interactive number displays to your web applications. It's easy to use, works with different types of data, and lets you customize the animations to make your numbers stand out.

Features

  • Counter Number - The value to be displayed.
  • StartValue - The initial value to be displayed before the animation starts. It sets the beginning of the slot machine animation.
  • startValueOnce- If set to true, the animation starts from the startValue only for the first render. For subsequent animations, it starts from the last value.
  • duration- The duration of the animation in seconds.
  • speed- The speed of counter when running.
  • Delay-The delay time of each column.
  • dummyCharacters- An array of dummy characters to be used in the animation.
  • dummyCharacterCount-The number of dummy characters to be displayed in the animation before reaching the target character.
  • autoAnimationStart-Determines whether the animation should start automatically when the component is first mounted.
  • animateUnchanged- Determines whether to animate only the characters that have changed.
  • hasInfiniteList-Determines whether the list should appear as continuous, with the end of the target character seamlessly connected to the beginning.
  • sequentialAnimationMode-Determines if the animation should increment or decrement sequentially from the startValue to value instead of random animation.
  • useMonospaceWidth-Ensures that all numeric characters occupy the same horizontal space, just like they would in a monospace font.
  • direction-Sets the direction of the slot machine animation. Accepted values are ‘bottom-up' and 'top-down'.
  • debounceDelay-Specifies the delay in milliseconds for debouncing animations. When the value changes rapidly, it allows the animation to execute smoothly.
  • animateOnVisible-Activates the animation when the component is visible in the viewport. rootMargin sets the margin around the viewport for triggering the animation, while triggerOnce determines if the animation should occur only once (true) or every time the component becomes visible (false).
  • containerClassName-The class name of container.
  • charClassName-The class name of each character.
  • separatorClassName-The class name of the separator character (. or ,).
  • valueClassName-The class name for the value of the slot, making it possible to customize the styling and visibility of the value.
  • numberSlotClassName- The class name for the number slot, allowing you to customize the styling of the number slot.
  • numberClassName- The class name for the number, allowing you to customize the styling of the number.

Dependencies:

• Mendix modeler 9.24.18.

Demo URL:

https://slotcouter-sandbox.mxapps.io/login.html?profile=Responsive

demo_administrator

Eb42f1yQ93aL

Issues, suggestions and feature requests

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

Releases

Version: 1.0.0
Framework Version: 9.24.18
Release Notes: **Slot Counter** Counter is a widget that helps you add animated and interactive number displays to your web applications. It's easy to use, works with different types of data, and lets you customize the animations to make your numbers stand out. **Features** • **Counter Number** - The value to be displayed. • **StartValue** - The initial value to be displayed before the animation starts. It sets the beginning of the slot machine animation. • **startValueOnce**- If set to true, the animation starts from the startValue only for the first render. For subsequent animations, it starts from the last value. • **duration**- The duration of the animation in seconds. • **speed**- The speed of counter when running. • **Delay**-The delay time of each column. • **dummyCharacters**- An array of dummy characters to be used in the animation. • **dummyCharacterCount**-The number of dummy characters to be displayed in the animation before reaching the target character. • **autoAnimationStart**-Determines whether the animation should start automatically when the component is first mounted. • **animateUnchanged**- Determines whether to animate only the characters that have changed. • **hasInfiniteList**-Determines whether the list should appear as continuous, with the end of the target character seamlessly connected to the beginning. • **sequentialAnimationMode**-Determines if the animation should increment or decrement sequentially from the startValue to value instead of random animation. • **useMonospaceWidth**-Ensures that all numeric characters occupy the same horizontal space, just like they would in a monospace font. • **direction**-Sets the direction of the slot machine animation. Accepted values are ‘bottom-up' and 'top-down'. • **debounceDelay**-Specifies the delay in milliseconds for debouncing animations. When the value changes rapidly, it allows the animation to execute smoothly. • **animateOnVisible**-Activates the animation when the component is visible in the viewport. rootMargin sets the margin around the viewport for triggering the animation, while triggerOnce determines if the animation should occur only once (true) or every time the component becomes visible (false). • **containerClassName**-The class name of container. • **charClassName**-The class name of each character. • **separatorClassName**-The class name of the separator character (. or ,). • **valueClassName**-The class name for the value of the slot, making it possible to customize the styling and visibility of the value. • **numberSlotClassName**- The class name for the number slot, allowing you to customize the styling of the number slot. • **numberClassName**- The class name for the number, allowing you to customize the styling of the number. **Dependencies**: • Mendix modeler 9.24.18. **Demo URL:** [https://slotcouter-sandbox.mxapps.io/login.html?profile=Responsive](https://slotcouter-sandbox.mxapps.io/login.html?profile=Responsive) demo_administrator Eb42f1yQ93aL **Issues, suggestions and feature requests** [https://github.com/bharathidas/Slot-Counter/issues](https://github.com/bharathidas/Slot-Counter/issues) **Screenshots:** ![Screenshot_1](https://github.com/user-attachments/assets/f7e42110-fcee-4672-a681-04de2767af03) ![Screenshot_2](https://github.com/user-attachments/assets/35ff1bac-f722-4803-acd7-3f49b8c9571b) ![Screenshot_3](https://github.com/user-attachments/assets/843f0259-b81d-4f2c-9c65-a767c08efe1d) ![Screenshot_4](https://github.com/user-attachments/assets/19915660-535f-4f3e-af15-64487f6cbc94)