Knowledge Drop

Converting seconds to mm:ss format

  • 6 April 2021
  • 0 replies

Userlevel 5

Last Tested: Jul 8, 2020



Imagine we have time value in seconds and we want to display as mm:ss in the front end. For instance, 123 seconds should be 2.03. We can do this using Liquid!


Here, we are assuming that we have 123 seconds.

html: {% assign seconds=value | modulo: 60 %} 

{{ value | divided_by: 60 | floor }}:{% if seconds < 10 %}0{% endif %}{{ seconds }} ;; 


Here, we are first assigning the variable seconds to our value.

Then, in the first part for "minutes", before the colon, we are taking the floor of given value (for eg: 123/60=2).
In the second part for "seconds", after the colon, since we've assigned our value to seconds, we are then taking the modulo of the value (for eg: 123 mod 60=3)

The tricky part here is that we want the final output to show 2.03 rather than 2.3, and this needs to be done for all the seconds that are less than 10. So, to incorporate this logic, we have used ':{% if seconds < 10 %}0{% endif %}{{ seconds }}', which says that if seconds is less than 10, add a 0. Otherwise, just put the value of seconds.

P.S. Ensure the raw value of seconds are rounded.


This content is subject to limited support.                


0 replies

Be the first to reply!