How to use OpenLayer ZoomSlider with Leaflet

Question

I tried to display a map with Leaflet and OSM. The project uses C# Blazor and .NET 8 but the map parts are just javascript. I added a slider to zoom using ZoomSlider from OpenLayers.

The slider does not appear until I add some customized styles and a div to wrap the slider. However, when I clicked on the slider, the button on the slider didn't move while the map moved a bit. It seems the slider didn't get the click event. Below is my code.

let map = L.map('map', {
    zoomControl: false
}).setView({ lon: 4.402771, lat: 51.260197 }, 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20 }).addTo(map);
L.control.zoom({ position: 'bottomright' }).addTo(map);

var olZoomSlider = new ol.control.ZoomSlider();

var customControl = L.Control.extend({
    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
        container.appendChild(olZoomSlider.element);
        return container;
    },
});


map.addControl(new customControl({ position: 'bottomright' }));

I saw some code using pure JavaScript map or map loaded from OL and it worked. Not sure this is a problem with Leaflet or not. Hope to get help about this.