Numbers
Inspired by shoelace but usable on regular
span elements with a data-number attribute, which stores the values
You can use data-number-config with a simple config or you can pass any parameter of Intl.NumberFormat
as data attributes if you prefer.
data-number is an observed attribute and changing its value will render the tag again.
Demos
data-number is converted, and localized when using lang attribute.
Number : 2,000,000
Number in german : 2.000.000
data-currency allows setting a specific currency. Set lang, name or fraction.
Currency : $2,000,000
Currency name : 2,000,000 US dollars
Currency in german : 2.000.001 $
Currency in german eur : 2.000.001 €
Currency in german : 2.000.000,55 $
Display decimal percents to full values.
Percent : 50%