Slick Slider - customPaging (ie. 01/04) - Change color and font-size

Question

Using Slick.js - I want to change the color and font-size of the pages when it's active, like the example:

With jQuery I'm using this:

$('#home .main-slider').slick({
   infinite: true,
   dots: true, 
   dotsClass: 'slider-paging-number',
   arrows: true,
   slidesToShow: 1,
   slidesToScroll: 1,
   autoplay: false,
   speed: 2000,
   fade: true,
   cssEase: 'linear',
   adaptiveHeight: true,
   adaptiveWidth: true,
   pauseOnHover: false,
   prevArrow:'<div class="arrow"><span class="prev"></span></div>',
   nextArrow:'<div class="arrow"><span class="next"></span></div>',

   customPaging: function (slick,index) { 
        return (index + 1) + ' ' + '/' + ' ' + '0' + slick.slideCount; 
        }
    })
    .on('afterChange', function (event, slick, currentSlide) {
        $(this).find('*[role="tablist"]').find('li').eq(0).text(slick.options.customPaging.call(this,  slick, currentSlide));

});