How to filter clustered markers on Leaflet.js using slider from nouislider

Question

I have clustered markers on the map and I am using a library called nouislider for my slider. I am using this to show certain markers based on the range of the distance specified.

I got this working for the markers but no luck on clustered markers. It is removing all my cluster markers rather than filter it. I'm not sure how to approach this. Will appreciate if it someone could direct me in the right direction.

Here is a link to my code. Please bare in mind I can't get the slider to show up on Jfiddle and also got an error on there -"L.geoJson is not a function"

Jifiddle

this is my filter which is working for markers but not for clustered markers, I think the problem is I am not filtering the clustered markers and I am not sure how to do it.

        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));
  }

Answer 1

You would probably be interested in my plugin Leaflet.MarkerCluster.LayerSupport:

Sub-plugin for Leaflet.markercluster plugin (MCG in short); brings compatibility with L.Control.Layers and other Leaflet plugins. I.e. everything that uses direct calls to map.addLayer and map.removeLayer.

See also How to use leaflet slider along with markercluster in Javascript?

In your case, you would check in your surfSpotsGeoJSON Leaflet GeoJSON Layer Group, and the plugin should take care of the rest.