Changing layer zIndex with a slider in Leaflet 1.0.0beta2

The zIndex values of various Leaflet layers can be independently manipulated by first assigning each of them to its own pane, then changing the value of the .style.zIndex for each pane.

HTML

<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.dotLegend {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: inline-block;
}

.bdotColor {
  background: #20a0ff;
}

.gdotColor {
  background: #40b060;
}

.rdotColor {
  background: #b04040;
}

.iLegend {
  width: 10px;
  height: 10px;
  display: inline-block;
}

.iColor {
  background: #eed;
}

.sliderContainer {
  background: #fff;
}

.zSlider {
  height: 200px;
  display: inline-block;
  margin: 12px;
}

#rdotSlider .ui-slider-range {
  background: #fff;
}

#rdotSlider .ui-slider-handle {
  background: #b04040;
  border-radius: 50%;
}

#gdotSlider .ui-slider-range {
  background: #fff;
}

#gdotSlider .ui-slider-handle {
  background: #40b060;
  border-radius: 50%;
}

#bdotSlider .ui-slider-range {
  background: #fff;
}

#bdotSlider .ui-slider-handle {
  background: #20a0ff;
  border-radius: 50%;
}

#imageSlider .ui-slider-range {
  background: #fff;
}

#imageSlider .ui-slider-handle {
  background: #eed;
  border-radius: 0%;
}

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

// set center coordinates
var centerlat = 34.05;
var centerlon = -118.24;

// set default zoom level
var zoomLevel = 12;

// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);

// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

////////////////////////////////////////////////////////////////////////////////////////////
//creating some GeoJSON dot clusters//
////////////////////////////////////////////////////////////////////////////////////////////

var bdotOptions = {
  count: 200,
  clusterRadius: 0.15,
  cLon: centerlon - 0.075,
  cLat: centerlat,
  nametext: 'blue_dot'
};

var gdotOptions = {
  count: 75,
  clusterRadius: 0.1,
  cLon: centerlon + 0.05,
  cLat: centerlat,
  nametext: 'green_dot'
};

var rdotOptions = {
  count: 100,
  clusterRadius: 0.1,
  cLon: centerlon,
  cLat: centerlat - 0.03,
  nametext: 'red_dot'
};

var bdots = makeDots(bdotOptions);
var gdots = makeDots(gdotOptions);
var rdots = makeDots(rdotOptions);

/////////////////////////////////////////////////////////////////////////////////////////////
//dot styles//
/////////////////////////////////////////////////////////////////////////////////////////////

//options for circle markers (**note that panes are defined here**)
var bdotStyleDefault = {
  radius: 8,
  fillColor: "#20a0ff",
  color: "#000",
  weight: 0,
  opacity: 1,
  fillOpacity: 0.9,
  pane: 'bpane'
};

var gdotStyleDefault = {
  radius: 8,
 ...