Multiple Value counters on a same page

[Twe3tone]

Hi ! I need to create 5 value counters with differents values and intervals on a same page. I can't find on flip documentation how to do it. Is it possible to add data on html and use only one function ? I'm trying to work with this one :

function handleTickInit(tick) {

                            // update the value every 5 seconds
                            var interval = Tick.helper.duration(5, 'seconds');

                            // value to add each interval
                            var valuePerInterval = 1;

                            // offset is a fixed date in the past
                            var dateOffset = Tick.helper.date('2021-04-19');

                            // value to start with, the value of the counter at the offset date
                            var valueOffset = 17143;

                            // uncomment lines below (and comment line above) if you want offset be set to the first time the user visited the page
                            // var offset = parseInt(localStorage.getItem('tick-value-counter-offset') || Date.now(), 10);
                            // localStorage.setItem('tick-value-counter-offset', offset);

                            // start updating the counter each second
                            Tick.helper.interval(function () {

                                // current time in milliseconds
                                var now = Date.now();

                                // difference with offset time in milliseconds
                                var diff = now - dateOffset;

                                // total time since offset divide by interval gives us the amount of loops since offset
                                var loops = diff / interval;

                                // this will make sure we only count completed loops.
                                loops = Math.floor(loops);

                                // multiply that by the value per interval and you have your final value
                                tick.value = valueOffset + (loops * valuePerInterval);

                            }, 1000);
                        }

Thanks in advance

[rikschennink]

Multiple counters can use the same function. It's up to you how you differentiate between different counters in that function. Or you can set up multiple functions by giving them different names. Here handleInit links the HTML to the function.

<div class="tick"
     data-did-init="handleInit"
     data-value="1000">

    <span data-view="text"></span>

</div>

<script>
function handleInit(tick) {

    // The `tick` parameter contains a reference
    // to the tick element that called this method
    // this makes it easier to use a single function
    // for multiple tick elements.

}
</script>

[Twe3tone]

I did the solution with different function names, it works perfectly, thank you. And very good plugin, thanks a lot !

[Twe3tone]

Oh another question sorry, how can I add space for thousand, million etc... between numbers ? I tried ".toLocaleString() ;" but not working (I have to use millions number and it's not really readable actually). I want something like this with space and splited individual numbers : 1 176 234 109 981 976 ...

Thx in advance !

[rikschennink]

you probably have to use css margins for that