Is there a way to make Period selectable in leaflet.timedimension

I use leaflet to show data for users on a map. I also use different leaflet plugins. One of them is the leaflet.timedimension plugin so a user can scroll through WMS layers valid at different times. But I have trouble figuring out how to make the period of timeDimensionsOptions selectable by the user.

I have set the period to 1 hour (PT60MIN), but some of my data are in 15 minutes interval (PT15MIN). What is the appropriate approach to let the user select the period or change the period based on the selected product?

I initialise my map like so:

var map = L.map('mapid', {
        zoom: 6,
        fullscreenControl: true,
        timeDimension: true,
        timeDimensionControl: true,
        scrollWheelZoom: true,
        timeDimensionOptions:{
            timeInterval: now + "/PT48H",
            period: "PT60M"
        },
        timeDimensionControlOptions: {
            autoPlay: false,
            timeZones: ['utc'],
            playerOptions: {
                buffer: 0,
                transitionTime: 500, // 1000/1500 ~ 0.7 fps
                loop: true,
            },
            speedSlider: true,
            limitSliders: true,
            displayDate: true
            position: 'bottomleft'
        },
        center: mapCenter: [56, 10],
        minZoom: 4,
    })

where period is the parameter that I would like to change dynamically.

I have made a MWE here of what I have now, but of course, without the option to change the period (timestep of the WMS layers). I am aware that the WMS layers do not work. I use a WMS-server behind a VPN wall, but it should not matter for the part related to timedimensions I hope.

My experience with javascript and leaflet is rather limited, so probably there is plenty of examples of bad practice.

from Is there a way to make Period selectable in leaflet.timedimension