Перелистывание карты Leaflet.js

Имеется карта Leaflet.js которую пользователь не может передвигать мышкой (нужно чтобы была только одна карта которая не переходит на другую)

var map = L.map('map', {
    dragging: false,
    touchZoom: false,
    scrollWheelZoom: false, 
    doubleClickZoom: false, 
    boxZoom: false,
    maxBounds: L.latLngBounds(L.latLng(40, -10), L.latLng(60, 10)),
    maxBoundsViscosity: 1.0
}).setView([51.505, -0.09], 2);

var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
osm.addTo(map);

Нужно сделать input типа range чтобы можно было листать карту не выходя за границы. Пытался сам но работает не корректно (не листается).

Оставляю код того что делал сам. Может пригодиться

<section class="map-section">
  <div class="map-container">
     <div id="map"></div>
     <input type="range" id="horizontal-pan-slider" min="-50" max="50" step="1" value="0">
  </div>
</section>

var horizontalPanSlider = document.getElementById('horizontal-pan-slider');


horizontalPanSlider.addEventListener('input', function() {
  var horizontalPanValue = parseInt(horizontalPanSlider.value);
  var mapBounds = map.getBounds();
  var horizontalOffset = (mapBounds.getEast() - mapBounds.getWest()) * horizontalPanValue / 100;
  map.panBy([horizontalOffset, 0], { animate: false });
});