Slider Fraction

Finsweet Components
1

Hello, it’s a small thing, but it matters to the client and I don’t know how to fix it. The slider is set to display numbers as fractions. It works great. The client just wants a zero before each number: 01/07, 02/07, and so on. I tried adding the zero manually, but it never loads. Can you please help me

2

Hey @martin1! There’s no built-in option in the Slider component for formatting fraction numbers with leading zeros — the numbers are generated dynamically by Swiper.js (the library powering Finsweet Slider), which is why manually adding a zero gets overwritten on load. The fix is a small custom script using the Finsweet Slider callback API.

Add this to your page’s Before </body> tag custom code section in Webflow:

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      sliderInstances.forEach((sliderInstance) => {

        const formatFraction = () => {
          const current = sliderInstance.el.querySelector('.swiper-pagination-current');
          const total = sliderInstance.el.querySelector('.swiper-pagination-total');
          if (current) current.textContent = current.textContent.padStart(2, '0');
          if (total) total.textContent = total.textContent.padStart(2, '0');
        };

        // Run on initial load
        formatFraction();

        // Run on every slide change
        sliderInstance.on('slideChange', formatFraction);

      });
    },
  ]);
</script>

A quick note on the selectors: .swiper-pagination-current and .swiper-pagination-total are Swiper’s standard class names for fraction pagination and should work out of the box. If you publish and the formatting doesn’t appear, right-click your fraction pagination element, hit Inspect, and verify the exact class names in your DOM — then swap them into the code above.

The forEach loop also means this handles multiple slider instances on the same page without any extra config. :flexed_biceps: