Number Switcher

text
true

Number Switcher

You can add an icon element, a span element with text or an img element inside the rwx-number-switcher element. You can also add a --right class modifier to the rwx-number-switcher element to make the value appear to the right of the icon, text or image.

Roseworx components have a scanDOM method which basically rescans the DOM for roseworx components and instantiates them. This is extremely useful for when you are dynamically / conditionally adding components to a page after the page load event or using Javascript frameworks like React or Vue. Simply run rwxNumberSwitchers.scanDOM().

Description

The Roseworx Number Switcher Component gives you a much better experience when a number changes to another number. Instead of the value changing instantly, this component animates through the difference to give an animated 'counting' effect. It also gives you the flexibility of using icons, text or images to compliment the number and specifying if a number is allowed to go into negatives.

Usage
  • import rwxNumberSwitchers from 'roseworx/js/components/rwxNumberSwitchers';
  • Copy the html code and personalise it to your use case.
  • Use the switch method below
Configuration Options

Optionally add any of these data attributes to the rwx-number-switcher element to configure it a certain way.

data-rwx-number-switcher-initial-value='{NUMBER}' Sets the initial value of the Number Switcher component (must be a number). If this attribute is not specified, the component will default to an initial value of 0.
data-rwx-number-switcher-stop-at-zero If you set the Number Switcher to switch to a number below 0, you can set this attribute to tell the component to not go into negative numbers and to stop at 0.
Additional Methods

These must only be called on or after the window load event.

switch

void

(

ID Of Number Switcher Element: String
Number To Switch to: Number
Don't animate the number change: Boolean

)

Switch the current value in the specified Number Switcher component to the specified new value.

						rwxNumberSwitchers.switch('idOfNumberSwitcher', numberToSwitchTo, false);