Как отфильтровать сгруппированные маркеры на Leaflet.js с помощью слайдера от nouislider

У меня есть сгруппированные маркеры на карте, и я использую библиотеку под названием nouislider для своего слайдера. Я использую это, чтобы показать определенные маркеры на основе диапазона указанного расстояния.

У меня это работает для маркеров, но не повезло с кластерными маркерами. Он удаляет все мои кластерные маркеры, а не фильтрует их. Я не уверен, как подойти к этому. Буду признателен, если кто-то сможет направить меня в правильном направлении.

Вот ссылка на мой код. Пожалуйста, имейте в виду, что я не могу заставить ползунок отображаться на Jfiddle, а также получил там ошибку: «L.geoJson не является функцией».

Jifiddle

это мой фильтр, который работает для маркеров, но не для сгруппированных маркеров, я думаю, проблема в том, что я не фильтрую сгруппированные маркеры, и я не знаю, как это сделать.

        var slider = document.getElementById("slider");

        noUiSlider
          .create(slider, {
            start: [min + 1, max - 1],
            tooltips: true,
            connect: true,
            range: {
              min: min,
              max: max
            }
          })
          .on("slide", function(e) {
            console.log("e", e);
            surfSpotsGeoJSON.eachLayer(function(layer) {
              console.log("layer", layer);
              if (
                parseFloat(layer.feature.properties.distance) >=
                  parseFloat(e[0]) &&
                parseFloat(layer.feature.properties.distance) <=
                  parseFloat(e[1])
              ) {
                layer.addTo(map);
              } else {
                map.removeLayer(layer);
              }
            });
          });
      })
      .catch(err => console.log(err.message));
  }