# Slider Fraction

**URL:** <https://forum.finsweet.com/t/slider-fraction/7352>\
**Category:** Finsweet Components\
**Created:** [June 8, 2026, 12:52pm UTC](https://forum.finsweet.com/t/slider-fraction/7352 "2026-06-08T12:52:39Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![martin1](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/martin1/32/3671_2.png) [@martin1](https://forum.finsweet.com/u/martin1)\
**Post date:** [June 8, 2026, 12:52pm UTC](https://forum.finsweet.com/t/slider-fraction/7352/1 "2026-06-08T12:52:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Support-Finn](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-finn/32/5169_2.png) [@Support-Finn](https://forum.finsweet.com/u/Support-Finn)\
**Post date:** [June 8, 2026, 6:14pm UTC](https://forum.finsweet.com/t/slider-fraction/7352/2 "2026-06-08T18:14:27Z")

</div>

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:

```html
<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. 💪