From fe916a59bcbc5c454cef1003fe88431590e52c9f Mon Sep 17 00:00:00 2001
From: Jack <36623994+jackWhtman@users.noreply.github.com>
Date: Wed, 22 Apr 2026 15:13:50 +0000
Subject: [PATCH] Changes to update package.json and build process to fix
 vulnerabilities

---
 index.html                  |  13 +-
 index.js                    |  39 +--
 leaflet-side-by-side.js     | 458 +++++++++++++++---------------------
 leaflet-side-by-side.min.js | 130 +++++++++-
 package.json                |  28 +--
 range.css                   |  29 ++-
 6 files changed, 386 insertions(+), 311 deletions(-)

diff --git a/index.html b/index.html
index 23c56ab..1d4bb34 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,18 @@
     <meta charset=utf-8 />
     <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
     <title>Leaflet Side-by-side</title>
-    <script src='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.js'></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+      crossorigin=""
+    />
+    <script
+      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+      crossorigin=""
+    ></script>
     <script src="leaflet-side-by-side.js"></script>
-    <link href='http://cdn.leafletjs.com/leaflet/v1.3.1/leaflet.css' rel='stylesheet' />
     <style>
     body {
         margin: 0;
diff --git a/index.js b/index.js
index 2a5110d..be9b245 100644
--- a/index.js
+++ b/index.js
@@ -1,36 +1,45 @@
-var L = require('leaflet')
-require('./layout.css')
-require('./range.css')
+import layoutCss from "./layout.css";
+import rangeCss from "./range.css";
+
+function injectStyle(css) {
+  const style = document.createElement("style");
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+// Inject both CSS files
+injectStyle(layoutCss);
+injectStyle(rangeCss);
 
 var mapWasDragEnabled
 var mapWasTapEnabled
 
 // Leaflet v0.7 backwards compatibility
-function on (el, types, fn, context) {
+function on(el, types, fn, context) {
   types.split(' ').forEach(function (type) {
     L.DomEvent.on(el, type, fn, context)
   })
 }
 
 // Leaflet v0.7 backwards compatibility
-function off (el, types, fn, context) {
+function off(el, types, fn, context) {
   types.split(' ').forEach(function (type) {
     L.DomEvent.off(el, type, fn, context)
   })
 }
 
-function getRangeEvent (rangeInput) {
+function getRangeEvent(rangeInput) {
   return 'oninput' in rangeInput ? 'input' : 'change'
 }
 
-function cancelMapDrag () {
+function cancelMapDrag() {
   mapWasDragEnabled = this._map.dragging.enabled()
   mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
   this._map.dragging.disable()
   this._map.tap && this._map.tap.disable()
 }
 
-function uncancelMapDrag (e) {
+function uncancelMapDrag(e) {
   this._refocusOnMap(e)
   if (mapWasDragEnabled) {
     this._map.dragging.enable()
@@ -41,11 +50,11 @@ function uncancelMapDrag (e) {
 }
 
 // convert arg to an array - returns empty array if arg is undefined
-function asArray (arg) {
+function asArray(arg) {
   return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
 }
 
-function noop () {}
+function noop() { }
 
 L.Control.SideBySide = L.Control.extend({
   options: {
@@ -126,7 +135,7 @@ L.Control.SideBySide = L.Control.extend({
     var dividerX = this.getPosition()
 
     this._divider.style.left = dividerX + 'px'
-    this.fire('dividermove', {x: dividerX})
+    this.fire('dividermove', { x: dividerX })
     var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
     var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
     if (this._leftLayer) {
@@ -155,12 +164,12 @@ L.Control.SideBySide = L.Control.extend({
       }
     }, this)
     if (prevLeft !== this._leftLayer) {
-      prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
-      this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
+      prevLeft && this.fire('leftlayerremove', { layer: prevLeft })
+      this._leftLayer && this.fire('leftlayeradd', { layer: this._leftLayer })
     }
     if (prevRight !== this._rightLayer) {
-      prevRight && this.fire('rightlayerremove', {layer: prevRight})
-      this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
+      prevRight && this.fire('rightlayerremove', { layer: prevRight })
+      this._rightLayer && this.fire('rightlayeradd', { layer: this._rightLayer })
     }
     this._updateClip()
   },
diff --git a/leaflet-side-by-side.js b/leaflet-side-by-side.js
index 2346119..e839b24 100644
--- a/leaflet-side-by-side.js
+++ b/leaflet-side-by-side.js
@@ -1,270 +1,200 @@
-(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
-(function (global){
-var L = (typeof window !== "undefined" ? window['L'] : typeof global !== "undefined" ? global['L'] : null)
-require('./layout.css')
-require('./range.css')
-
-var mapWasDragEnabled
-var mapWasTapEnabled
-
-// Leaflet v0.7 backwards compatibility
-function on (el, types, fn, context) {
-  types.split(' ').forEach(function (type) {
-    L.DomEvent.on(el, type, fn, context)
-  })
-}
-
-// Leaflet v0.7 backwards compatibility
-function off (el, types, fn, context) {
-  types.split(' ').forEach(function (type) {
-    L.DomEvent.off(el, type, fn, context)
-  })
-}
-
-function getRangeEvent (rangeInput) {
-  return 'oninput' in rangeInput ? 'input' : 'change'
-}
-
-function cancelMapDrag () {
-  mapWasDragEnabled = this._map.dragging.enabled()
-  mapWasTapEnabled = this._map.tap && this._map.tap.enabled()
-  this._map.dragging.disable()
-  this._map.tap && this._map.tap.disable()
-}
-
-function uncancelMapDrag (e) {
-  this._refocusOnMap(e)
-  if (mapWasDragEnabled) {
-    this._map.dragging.enable()
-  }
-  if (mapWasTapEnabled) {
-    this._map.tap.enable()
-  }
-}
-
-// convert arg to an array - returns empty array if arg is undefined
-function asArray (arg) {
-  return (arg === 'undefined') ? [] : Array.isArray(arg) ? arg : [arg]
-}
-
-function noop () {}
-
-L.Control.SideBySide = L.Control.extend({
-  options: {
-    thumbSize: 42,
-    padding: 0
-  },
-
-  initialize: function (leftLayers, rightLayers, options) {
-    this.setLeftLayers(leftLayers)
-    this.setRightLayers(rightLayers)
-    L.setOptions(this, options)
-  },
-
-  getPosition: function () {
-    var rangeValue = this._range.value
-    var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
-    return this._map.getSize().x * rangeValue + offset
-  },
-
-  setPosition: noop,
-
-  includes: L.Evented.prototype || L.Mixin.Events,
-
-  addTo: function (map) {
-    this.remove()
-    this._map = map
-
-    var container = this._container = L.DomUtil.create('div', 'leaflet-sbs', map._controlContainer)
-
-    this._divider = L.DomUtil.create('div', 'leaflet-sbs-divider', container)
-    var range = this._range = L.DomUtil.create('input', 'leaflet-sbs-range', container)
-    range.type = 'range'
-    range.min = 0
-    range.max = 1
-    range.step = 'any'
-    range.value = 0.5
-    range.style.paddingLeft = range.style.paddingRight = this.options.padding + 'px'
-    this._addEvents()
-    this._updateLayers()
-    return this
-  },
-
-  remove: function () {
-    if (!this._map) {
-      return this
+(() => {
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __esm = (fn, res) => function __init() {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  };
+  var __commonJS = (cb, mod) => function __require() {
+    return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+  };
+
+  // layout.css
+  var layout_default;
+  var init_layout = __esm({
+    "layout.css"() {
+      layout_default = ".leaflet-sbs-range {\n    position: absolute;\n    top: 50%;\n    width: 100%;\n    z-index: 999;\n}\n.leaflet-sbs-divider {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 50%;\n    margin-left: -2px;\n    width: 4px;\n    background-color: #fff;\n    pointer-events: none;\n    z-index: 999;\n}\n";
     }
-    if (this._leftLayer) {
-      this._leftLayer.getContainer().style.clip = ''
-    }
-    if (this._rightLayer) {
-      this._rightLayer.getContainer().style.clip = ''
-    }
-    this._removeEvents()
-    L.DomUtil.remove(this._container)
-
-    this._map = null
+  });
 
-    return this
-  },
-
-  setLeftLayers: function (leftLayers) {
-    this._leftLayers = asArray(leftLayers)
-    this._updateLayers()
-    return this
-  },
-
-  setRightLayers: function (rightLayers) {
-    this._rightLayers = asArray(rightLayers)
-    this._updateLayers()
-    return this
-  },
-
-  _updateClip: function () {
-    var map = this._map
-    var nw = map.containerPointToLayerPoint([0, 0])
-    var se = map.containerPointToLayerPoint(map.getSize())
-    var clipX = nw.x + this.getPosition()
-    var dividerX = this.getPosition()
-
-    this._divider.style.left = dividerX + 'px'
-    this.fire('dividermove', {x: dividerX})
-    var clipLeft = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)'
-    var clipRight = 'rect(' + [nw.y, se.x, se.y, clipX].join('px,') + 'px)'
-    if (this._leftLayer) {
-      this._leftLayer.getContainer().style.clip = clipLeft
-    }
-    if (this._rightLayer) {
-      this._rightLayer.getContainer().style.clip = clipRight
+  // range.css
+  var range_default;
+  var init_range = __esm({
+    "range.css"() {
+      range_default = ".leaflet-sbs-range {\n    -webkit-appearance: none;\n    display: inline-block !important;\n    vertical-align: middle;\n    height: 0;\n    padding: 0;\n    margin: 0;\n    border: 0;\n    background: rgba(0, 0, 0, 0.25);\n    min-width: 100px;\n    cursor: pointer;\n    pointer-events: none;\n    z-index: 999;\n}\n\n.leaflet-sbs-range::-ms-fill-upper {\n    background: transparent;\n}\n\n.leaflet-sbs-range::-ms-fill-lower {\n    background: rgba(255, 255, 255, 0.25);\n}\n\n/* Browser thingies */\n\n.leaflet-sbs-range::-moz-range-track {\n    opacity: 0;\n}\n\n.leaflet-sbs-range::-ms-track {\n    opacity: 0;\n}\n\n.leaflet-sbs-range::-ms-tooltip {\n    display: none;\n}\n\n/* For whatever reason, these need to be defined\n * on their own so dont group them */\n\n.leaflet-sbs-range::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin: 0;\n    padding: 0;\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n\n.leaflet-sbs-range::-ms-thumb {\n    margin: 0;\n    padding: 0;\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n\n.leaflet-sbs-range::-moz-range-thumb {\n    padding: 0;\n    right: 0;\n    background: #fff;\n    height: 40px;\n    width: 40px;\n    border-radius: 20px;\n    cursor: ew-resize;\n    pointer-events: auto;\n    border: 1px solid #ddd;\n    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);\n    background-position: 50% 50%;\n    background-repeat: no-repeat;\n    background-size: 40px 40px;\n}\n\n.leaflet-sbs-range:disabled::-moz-range-thumb {\n    cursor: default;\n}\n\n.leaflet-sbs-range:disabled::-ms-thumb {\n    cursor: default;\n}\n\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\n    cursor: default;\n}\n\n.leaflet-sbs-range:disabled {\n    cursor: default;\n}\n\n.leaflet-sbs-range:focus {\n    outline: none !important;\n}\n\n.leaflet-sbs-range::-moz-focus-outer {\n    border: 0;\n}";
     }
-  },
-
-  _updateLayers: function () {
-    if (!this._map) {
-      return this
-    }
-    var prevLeft = this._leftLayer
-    var prevRight = this._rightLayer
-    this._leftLayer = this._rightLayer = null
-    this._leftLayers.forEach(function (layer) {
-      if (this._map.hasLayer(layer)) {
-        this._leftLayer = layer
+  });
+
+  // index.js
+  var require_index = __commonJS({
+    "index.js"(exports, module) {
+      init_layout();
+      init_range();
+      function injectStyle(css) {
+        const style = document.createElement("style");
+        style.textContent = css;
+        document.head.appendChild(style);
       }
-    }, this)
-    this._rightLayers.forEach(function (layer) {
-      if (this._map.hasLayer(layer)) {
-        this._rightLayer = layer
+      injectStyle(layout_default);
+      injectStyle(range_default);
+      var mapWasDragEnabled;
+      var mapWasTapEnabled;
+      function getRangeEvent(rangeInput) {
+        return "oninput" in rangeInput ? "input" : "change";
       }
-    }, this)
-    if (prevLeft !== this._leftLayer) {
-      prevLeft && this.fire('leftlayerremove', {layer: prevLeft})
-      this._leftLayer && this.fire('leftlayeradd', {layer: this._leftLayer})
-    }
-    if (prevRight !== this._rightLayer) {
-      prevRight && this.fire('rightlayerremove', {layer: prevRight})
-      this._rightLayer && this.fire('rightlayeradd', {layer: this._rightLayer})
-    }
-    this._updateClip()
-  },
-
-  _addEvents: function () {
-    var range = this._range
-    var map = this._map
-    if (!map || !range) return
-    map.on('move', this._updateClip, this)
-    map.on('layeradd layerremove', this._updateLayers, this)
-    on(range, getRangeEvent(range), this._updateClip, this)
-    on(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
-    on(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
-  },
-
-  _removeEvents: function () {
-    var range = this._range
-    var map = this._map
-    if (range) {
-      off(range, getRangeEvent(range), this._updateClip, this)
-      off(range, L.Browser.touch ? 'touchstart' : 'mousedown', cancelMapDrag, this)
-      off(range, L.Browser.touch ? 'touchend' : 'mouseup', uncancelMapDrag, this)
-    }
-    if (map) {
-      map.off('layeradd layerremove', this._updateLayers, this)
-      map.off('move', this._updateClip, this)
-    }
-  }
-})
-
-L.control.sideBySide = function (leftLayers, rightLayers, options) {
-  return new L.Control.SideBySide(leftLayers, rightLayers, options)
-}
-
-module.exports = L.Control.SideBySide
-
-}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
-},{"./layout.css":2,"./range.css":4}],2:[function(require,module,exports){
-var inject = require('./node_modules/cssify');
-var css = ".leaflet-sbs-range {\r\n    position: absolute;\r\n    top: 50%;\r\n    width: 100%;\r\n    z-index: 999;\r\n}\r\n.leaflet-sbs-divider {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 50%;\r\n    margin-left: -2px;\r\n    width: 4px;\r\n    background-color: #fff;\r\n    pointer-events: none;\r\n    z-index: 999;\r\n}\r\n";
-inject(css, undefined, '_i6aomd');
-module.exports = css;
-
-},{"./node_modules/cssify":3}],3:[function(require,module,exports){
-'use strict'
-
-function injectStyleTag (document, fileName, cb) {
-  var style = document.getElementById(fileName)
-
-  if (style) {
-    cb(style)
-  } else {
-    var head = document.getElementsByTagName('head')[0]
-
-    style = document.createElement('style')
-    if (fileName != null) style.id = fileName
-    cb(style)
-    head.appendChild(style)
-  }
-
-  return style
-}
-
-module.exports = function (css, customDocument, fileName) {
-  var doc = customDocument || document
-  /* istanbul ignore if: not supported by Electron */
-  if (doc.createStyleSheet) {
-    var sheet = doc.createStyleSheet()
-    sheet.cssText = css
-    return sheet.ownerNode
-  } else {
-    return injectStyleTag(doc, fileName, function (style) {
-      /* istanbul ignore if: not supported by Electron */
-      if (style.styleSheet) {
-        style.styleSheet.cssText = css
-      } else {
-        style.innerHTML = css
+      function cancelMapDrag() {
+        mapWasDragEnabled = this._map.dragging.enabled();
+        mapWasTapEnabled = this._map.tap && this._map.tap.enabled();
+        this._map.dragging.disable();
+        this._map.tap && this._map.tap.disable();
       }
-    })
-  }
-}
-
-module.exports.byUrl = function (url) {
-  /* istanbul ignore if: not supported by Electron */
-  if (document.createStyleSheet) {
-    return document.createStyleSheet(url).ownerNode
-  } else {
-    var head = document.getElementsByTagName('head')[0]
-    var link = document.createElement('link')
-
-    link.rel = 'stylesheet'
-    link.href = url
-
-    head.appendChild(link)
-    return link
-  }
-}
-
-},{}],4:[function(require,module,exports){
-var inject = require('./node_modules/cssify');
-var css = ".leaflet-sbs-range {\r\n    -webkit-appearance: none;\r\n    display: inline-block!important;\r\n    vertical-align: middle;\r\n    height: 0;\r\n    padding: 0;\r\n    margin: 0;\r\n    border: 0;\r\n    background: rgba(0, 0, 0, 0.25);\r\n    min-width: 100px;\r\n    cursor: pointer;\r\n    pointer-events: none;\r\n    z-index: 999;\r\n}\r\n.leaflet-sbs-range::-ms-fill-upper {\r\n    background: transparent;\r\n}\r\n.leaflet-sbs-range::-ms-fill-lower {\r\n    background: rgba(255, 255, 255, 0.25);\r\n}\r\n/* Browser thingies */\r\n\r\n.leaflet-sbs-range::-moz-range-track {\r\n    opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-track {\r\n    opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-tooltip {\r\n    display: none;\r\n}\r\n/* For whatever reason, these need to be defined\r\n * on their own so dont group them */\r\n\r\n.leaflet-sbs-range::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-ms-thumb {\r\n    margin: 0;\r\n    padding: 0;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-moz-range-thumb {\r\n    padding: 0;\r\n    right: 0    ;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC\");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range:disabled::-moz-range-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-ms-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:focus {\r\n    outline: none!important;\r\n}\r\n.leaflet-sbs-range::-moz-focus-outer {\r\n    border: 0;\r\n}\r\n\r\n";
-inject(css, undefined, '_1tlt668');
-module.exports = css;
-
-},{"./node_modules/cssify":3}]},{},[1]);
+      function uncancelMapDrag(e) {
+        this._refocusOnMap(e);
+        if (mapWasDragEnabled) {
+          this._map.dragging.enable();
+        }
+        if (mapWasTapEnabled) {
+          this._map.tap.enable();
+        }
+      }
+      function asArray(arg) {
+        return arg === "undefined" ? [] : Array.isArray(arg) ? arg : [arg];
+      }
+      function noop() {
+      }
+      L.Control.SideBySide = L.Control.extend({
+        options: {
+          thumbSize: 42,
+          padding: 0
+        },
+        initialize: function(leftLayers, rightLayers, options) {
+          this.setLeftLayers(leftLayers);
+          this.setRightLayers(rightLayers);
+          L.setOptions(this, options);
+        },
+        getPosition: function() {
+          var rangeValue = this._range.value;
+          var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize);
+          return this._map.getSize().x * rangeValue + offset;
+        },
+        setPosition: noop,
+        includes: L.Evented.prototype || L.Mixin.Events,
+        addTo: function(map) {
+          this.remove();
+          this._map = map;
+          var container = this._container = L.DomUtil.create("div", "leaflet-sbs", map._controlContainer);
+          this._divider = L.DomUtil.create("div", "leaflet-sbs-divider", container);
+          var range = this._range = L.DomUtil.create("input", "leaflet-sbs-range", container);
+          range.type = "range";
+          range.min = 0;
+          range.max = 1;
+          range.step = "any";
+          range.value = 0.5;
+          range.style.paddingLeft = range.style.paddingRight = this.options.padding + "px";
+          this._addEvents();
+          this._updateLayers();
+          return this;
+        },
+        remove: function() {
+          if (!this._map) {
+            return this;
+          }
+          if (this._leftLayer) {
+            this._leftLayer.getContainer().style.clip = "";
+          }
+          if (this._rightLayer) {
+            this._rightLayer.getContainer().style.clip = "";
+          }
+          this._removeEvents();
+          L.DomUtil.remove(this._container);
+          this._map = null;
+          return this;
+        },
+        setLeftLayers: function(leftLayers) {
+          this._leftLayers = asArray(leftLayers);
+          this._updateLayers();
+          return this;
+        },
+        setRightLayers: function(rightLayers) {
+          this._rightLayers = asArray(rightLayers);
+          this._updateLayers();
+          return this;
+        },
+        _updateClip: function() {
+          var map = this._map;
+          var nw = map.containerPointToLayerPoint([0, 0]);
+          var se = map.containerPointToLayerPoint(map.getSize());
+          var clipX = nw.x + this.getPosition();
+          var dividerX = this.getPosition();
+          this._divider.style.left = dividerX + "px";
+          this.fire("dividermove", { x: dividerX });
+          var clipLeft = "rect(" + [nw.y, clipX, se.y, nw.x].join("px,") + "px)";
+          var clipRight = "rect(" + [nw.y, se.x, se.y, clipX].join("px,") + "px)";
+          if (this._leftLayer) {
+            this._leftLayer.getContainer().style.clip = clipLeft;
+          }
+          if (this._rightLayer) {
+            this._rightLayer.getContainer().style.clip = clipRight;
+          }
+        },
+        _updateLayers: function() {
+          if (!this._map) {
+            return this;
+          }
+          var prevLeft = this._leftLayer;
+          var prevRight = this._rightLayer;
+          this._leftLayer = this._rightLayer = null;
+          this._leftLayers.forEach(function(layer) {
+            if (this._map.hasLayer(layer)) {
+              this._leftLayer = layer;
+            }
+          }, this);
+          this._rightLayers.forEach(function(layer) {
+            if (this._map.hasLayer(layer)) {
+              this._rightLayer = layer;
+            }
+          }, this);
+          if (prevLeft !== this._leftLayer) {
+            prevLeft && this.fire("leftlayerremove", { layer: prevLeft });
+            this._leftLayer && this.fire("leftlayeradd", { layer: this._leftLayer });
+          }
+          if (prevRight !== this._rightLayer) {
+            prevRight && this.fire("rightlayerremove", { layer: prevRight });
+            this._rightLayer && this.fire("rightlayeradd", { layer: this._rightLayer });
+          }
+          this._updateClip();
+        },
+        _addEvents: function() {
+          var range = this._range;
+          var map = this._map;
+          if (!map || !range) return;
+          map.on("move", this._updateClip, this);
+          map.on("layeradd layerremove", this._updateLayers, this);
+          L.DomEvent.on(range, getRangeEvent(range), this._updateClip, this);
+          L.DomEvent.on(range, "touchstart", cancelMapDrag, this);
+          L.DomEvent.on(range, "touchend", uncancelMapDrag, this);
+          L.DomEvent.on(range, "mousedown", cancelMapDrag, this);
+          L.DomEvent.on(range, "mouseup", uncancelMapDrag, this);
+        },
+        _removeEvents: function() {
+          var range = this._range;
+          var map = this._map;
+          if (range) {
+            L.DomEvent.off(range, getRangeEvent(range), this._updateClip, this);
+            L.DomEvent.off(range, "touchstart", cancelMapDrag, this);
+            L.DomEvent.off(range, "touchend", uncancelMapDrag, this);
+            L.DomEvent.off(range, "mousedown", cancelMapDrag, this);
+            L.DomEvent.off(range, "mouseup", uncancelMapDrag, this);
+          }
+          if (map) {
+            map.off("layeradd layerremove", this._updateLayers, this);
+            map.off("move", this._updateClip, this);
+          }
+        }
+      });
+      L.control.sideBySide = function(leftLayers, rightLayers, options) {
+        return new L.Control.SideBySide(leftLayers, rightLayers, options);
+      };
+      module.exports = L.Control.SideBySide;
+    }
+  });
+  require_index();
+})();
diff --git a/leaflet-side-by-side.min.js b/leaflet-side-by-side.min.js
index bdc2de3..7d39a4f 100644
--- a/leaflet-side-by-side.min.js
+++ b/leaflet-side-by-side.min.js
@@ -1 +1,129 @@
-!function a(s,o,d){function l(r,e){if(!o[r]){if(!s[r]){var t="function"==typeof require&&require;if(!e&&t)return t(r,!0);if(h)return h(r,!0);var n=new Error("Cannot find module '"+r+"'");throw n.code="MODULE_NOT_FOUND",n}var i=o[r]={exports:{}};s[r][0].call(i.exports,function(e){return l(s[r][1][e]||e)},i,i.exports,a,s,o,d)}return o[r].exports}for(var h="function"==typeof require&&require,e=0;e<d.length;e++)l(d[e]);return l}({1:[function(h,u,e){(function(e){var r,t,i="undefined"!=typeof window?window.L:void 0!==e?e.L:null;function n(r,e,t,n){e.split(" ").forEach(function(e){i.DomEvent.on(r,e,t,n)})}function a(r,e,t,n){e.split(" ").forEach(function(e){i.DomEvent.off(r,e,t,n)})}function s(e){return"oninput"in e?"input":"change"}function o(){r=this._map.dragging.enabled(),t=this._map.tap&&this._map.tap.enabled(),this._map.dragging.disable(),this._map.tap&&this._map.tap.disable()}function d(e){this._refocusOnMap(e),r&&this._map.dragging.enable(),t&&this._map.tap.enable()}function l(e){return"undefined"===e?[]:Array.isArray(e)?e:[e]}h("./layout.css"),h("./range.css"),i.Control.SideBySide=i.Control.extend({options:{thumbSize:42,padding:0},initialize:function(e,r,t){this.setLeftLayers(e),this.setRightLayers(r),i.setOptions(this,t)},getPosition:function(){var e=this._range.value,r=(.5-e)*(2*this.options.padding+this.options.thumbSize);return this._map.getSize().x*e+r},setPosition:function(){},includes:i.Evented.prototype||i.Mixin.Events,addTo:function(e){this.remove(),this._map=e;var r=this._container=i.DomUtil.create("div","leaflet-sbs",e._controlContainer);this._divider=i.DomUtil.create("div","leaflet-sbs-divider",r);var t=this._range=i.DomUtil.create("input","leaflet-sbs-range",r);return t.type="range",t.min=0,t.max=1,t.step="any",t.value=.5,t.style.paddingLeft=t.style.paddingRight=this.options.padding+"px",this._addEvents(),this._updateLayers(),this},remove:function(){return this._map&&(this._leftLayer&&(this._leftLayer.getContainer().style.clip=""),this._rightLayer&&(this._rightLayer.getContainer().style.clip=""),this._removeEvents(),i.DomUtil.remove(this._container),this._map=null),this},setLeftLayers:function(e){return this._leftLayers=l(e),this._updateLayers(),this},setRightLayers:function(e){return this._rightLayers=l(e),this._updateLayers(),this},_updateClip:function(){var e=this._map,r=e.containerPointToLayerPoint([0,0]),t=e.containerPointToLayerPoint(e.getSize()),n=r.x+this.getPosition(),i=this.getPosition();this._divider.style.left=i+"px",this.fire("dividermove",{x:i});var a="rect("+[r.y,n,t.y,r.x].join("px,")+"px)",s="rect("+[r.y,t.x,t.y,n].join("px,")+"px)";this._leftLayer&&(this._leftLayer.getContainer().style.clip=a),this._rightLayer&&(this._rightLayer.getContainer().style.clip=s)},_updateLayers:function(){if(!this._map)return this;var e=this._leftLayer,r=this._rightLayer;this._leftLayer=this._rightLayer=null,this._leftLayers.forEach(function(e){this._map.hasLayer(e)&&(this._leftLayer=e)},this),this._rightLayers.forEach(function(e){this._map.hasLayer(e)&&(this._rightLayer=e)},this),e!==this._leftLayer&&(e&&this.fire("leftlayerremove",{layer:e}),this._leftLayer&&this.fire("leftlayeradd",{layer:this._leftLayer})),r!==this._rightLayer&&(r&&this.fire("rightlayerremove",{layer:r}),this._rightLayer&&this.fire("rightlayeradd",{layer:this._rightLayer})),this._updateClip()},_addEvents:function(){var e=this._range,r=this._map;r&&e&&(r.on("move",this._updateClip,this),r.on("layeradd layerremove",this._updateLayers,this),n(e,s(e),this._updateClip,this),n(e,i.Browser.touch?"touchstart":"mousedown",o,this),n(e,i.Browser.touch?"touchend":"mouseup",d,this))},_removeEvents:function(){var e=this._range,r=this._map;e&&(a(e,s(e),this._updateClip,this),a(e,i.Browser.touch?"touchstart":"mousedown",o,this),a(e,i.Browser.touch?"touchend":"mouseup",d,this)),r&&(r.off("layeradd layerremove",this._updateLayers,this),r.off("move",this._updateClip,this))}}),i.control.sideBySide=function(e,r,t){return new i.Control.SideBySide(e,r,t)},u.exports=i.Control.SideBySide}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./layout.css":2,"./range.css":4}],2:[function(e,r,t){var n=".leaflet-sbs-range {\r\n    position: absolute;\r\n    top: 50%;\r\n    width: 100%;\r\n    z-index: 999;\r\n}\r\n.leaflet-sbs-divider {\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 50%;\r\n    margin-left: -2px;\r\n    width: 4px;\r\n    background-color: #fff;\r\n    pointer-events: none;\r\n    z-index: 999;\r\n}\r\n";e("./node_modules/cssify")(n,void 0,"_i6aomd"),r.exports=n},{"./node_modules/cssify":3}],3:[function(e,r,t){"use strict";r.exports=function(r,e,t){var n=e||document;if(n.createStyleSheet){var i=n.createStyleSheet();return i.cssText=r,i.ownerNode}return function(e,r,t){var n=e.getElementById(r);if(n)t(n);else{var i=e.getElementsByTagName("head")[0];n=e.createElement("style"),null!=r&&(n.id=r),t(n),i.appendChild(n)}return n}(n,t,function(e){e.styleSheet?e.styleSheet.cssText=r:e.innerHTML=r})},r.exports.byUrl=function(e){if(document.createStyleSheet)return document.createStyleSheet(e).ownerNode;var r=document.getElementsByTagName("head")[0],t=document.createElement("link");return t.rel="stylesheet",t.href=e,r.appendChild(t),t}},{}],4:[function(e,r,t){var n='.leaflet-sbs-range {\r\n    -webkit-appearance: none;\r\n    display: inline-block!important;\r\n    vertical-align: middle;\r\n    height: 0;\r\n    padding: 0;\r\n    margin: 0;\r\n    border: 0;\r\n    background: rgba(0, 0, 0, 0.25);\r\n    min-width: 100px;\r\n    cursor: pointer;\r\n    pointer-events: none;\r\n    z-index: 999;\r\n}\r\n.leaflet-sbs-range::-ms-fill-upper {\r\n    background: transparent;\r\n}\r\n.leaflet-sbs-range::-ms-fill-lower {\r\n    background: rgba(255, 255, 255, 0.25);\r\n}\r\n/* Browser thingies */\r\n\r\n.leaflet-sbs-range::-moz-range-track {\r\n    opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-track {\r\n    opacity: 0;\r\n}\r\n.leaflet-sbs-range::-ms-tooltip {\r\n    display: none;\r\n}\r\n/* For whatever reason, these need to be defined\r\n * on their own so dont group them */\r\n\r\n.leaflet-sbs-range::-webkit-slider-thumb {\r\n    -webkit-appearance: none;\r\n    margin: 0;\r\n    padding: 0;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-ms-thumb {\r\n    margin: 0;\r\n    padding: 0;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range::-moz-range-thumb {\r\n    padding: 0;\r\n    right: 0    ;\r\n    background: #fff;\r\n    height: 40px;\r\n    width: 40px;\r\n    border-radius: 20px;\r\n    cursor: ew-resize;\r\n    pointer-events: auto;\r\n    border: 1px solid #ddd;\r\n    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC");\r\n    background-position: 50% 50%;\r\n    background-repeat: no-repeat;\r\n    background-size: 40px 40px;\r\n}\r\n.leaflet-sbs-range:disabled::-moz-range-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-ms-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled::-webkit-slider-thumb {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:disabled {\r\n    cursor: default;\r\n}\r\n.leaflet-sbs-range:focus {\r\n    outline: none!important;\r\n}\r\n.leaflet-sbs-range::-moz-focus-outer {\r\n    border: 0;\r\n}\r\n\r\n';e("./node_modules/cssify")(n,void 0,"_1tlt668"),r.exports=n},{"./node_modules/cssify":3}]},{},[1]);
\ No newline at end of file
+(()=>{var o=(e,t)=>()=>(e&&(t=e(e=0)),t);var v=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var l,h=o(()=>{l=`.leaflet-sbs-range {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    z-index: 999;
+}
+.leaflet-sbs-divider {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -2px;
+    width: 4px;
+    background-color: #fff;
+    pointer-events: none;
+    z-index: 999;
+}
+`});var p,d=o(()=>{p=`.leaflet-sbs-range {
+    -webkit-appearance: none;
+    display: inline-block !important;
+    vertical-align: middle;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: rgba(0, 0, 0, 0.25);
+    min-width: 100px;
+    cursor: pointer;
+    pointer-events: none;
+    z-index: 999;
+}
+
+.leaflet-sbs-range::-ms-fill-upper {
+    background: transparent;
+}
+
+.leaflet-sbs-range::-ms-fill-lower {
+    background: rgba(255, 255, 255, 0.25);
+}
+
+/* Browser thingies */
+
+.leaflet-sbs-range::-moz-range-track {
+    opacity: 0;
+}
+
+.leaflet-sbs-range::-ms-track {
+    opacity: 0;
+}
+
+.leaflet-sbs-range::-ms-tooltip {
+    display: none;
+}
+
+/* For whatever reason, these need to be defined
+ * on their own so dont group them */
+
+.leaflet-sbs-range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin: 0;
+    padding: 0;
+    background: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid #ddd;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+}
+
+.leaflet-sbs-range::-ms-thumb {
+    margin: 0;
+    padding: 0;
+    background: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid #ddd;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+}
+
+.leaflet-sbs-range::-moz-range-thumb {
+    padding: 0;
+    right: 0;
+    background: #fff;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    cursor: ew-resize;
+    pointer-events: auto;
+    border: 1px solid #ddd;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 40px 40px;
+}
+
+.leaflet-sbs-range:disabled::-moz-range-thumb {
+    cursor: default;
+}
+
+.leaflet-sbs-range:disabled::-ms-thumb {
+    cursor: default;
+}
+
+.leaflet-sbs-range:disabled::-webkit-slider-thumb {
+    cursor: default;
+}
+
+.leaflet-sbs-range:disabled {
+    cursor: default;
+}
+
+.leaflet-sbs-range:focus {
+    outline: none !important;
+}
+
+.leaflet-sbs-range::-moz-focus-outer {
+    border: 0;
+}`});var E=v((S,m)=>{h();d();function g(e){let t=document.createElement("style");t.textContent=e,document.head.appendChild(t)}g(l);g(p);var u,c;function f(e){return"oninput"in e?"input":"change"}function a(){u=this._map.dragging.enabled(),c=this._map.tap&&this._map.tap.enabled(),this._map.dragging.disable(),this._map.tap&&this._map.tap.disable()}function r(e){this._refocusOnMap(e),u&&this._map.dragging.enable(),c&&this._map.tap.enable()}function A(e){return e==="undefined"?[]:Array.isArray(e)?e:[e]}function C(){}L.Control.SideBySide=L.Control.extend({options:{thumbSize:42,padding:0},initialize:function(e,t,i){this.setLeftLayers(e),this.setRightLayers(t),L.setOptions(this,i)},getPosition:function(){var e=this._range.value,t=(.5-e)*(2*this.options.padding+this.options.thumbSize);return this._map.getSize().x*e+t},setPosition:C,includes:L.Evented.prototype||L.Mixin.Events,addTo:function(e){this.remove(),this._map=e;var t=this._container=L.DomUtil.create("div","leaflet-sbs",e._controlContainer);this._divider=L.DomUtil.create("div","leaflet-sbs-divider",t);var i=this._range=L.DomUtil.create("input","leaflet-sbs-range",t);return i.type="range",i.min=0,i.max=1,i.step="any",i.value=.5,i.style.paddingLeft=i.style.paddingRight=this.options.padding+"px",this._addEvents(),this._updateLayers(),this},remove:function(){return this._map?(this._leftLayer&&(this._leftLayer.getContainer().style.clip=""),this._rightLayer&&(this._rightLayer.getContainer().style.clip=""),this._removeEvents(),L.DomUtil.remove(this._container),this._map=null,this):this},setLeftLayers:function(e){return this._leftLayers=A(e),this._updateLayers(),this},setRightLayers:function(e){return this._rightLayers=A(e),this._updateLayers(),this},_updateClip:function(){var e=this._map,t=e.containerPointToLayerPoint([0,0]),i=e.containerPointToLayerPoint(e.getSize()),n=t.x+this.getPosition(),s=this.getPosition();this._divider.style.left=s+"px",this.fire("dividermove",{x:s});var b="rect("+[t.y,n,i.y,t.x].join("px,")+"px)",y="rect("+[t.y,i.x,i.y,n].join("px,")+"px)";this._leftLayer&&(this._leftLayer.getContainer().style.clip=b),this._rightLayer&&(this._rightLayer.getContainer().style.clip=y)},_updateLayers:function(){if(!this._map)return this;var e=this._leftLayer,t=this._rightLayer;this._leftLayer=this._rightLayer=null,this._leftLayers.forEach(function(i){this._map.hasLayer(i)&&(this._leftLayer=i)},this),this._rightLayers.forEach(function(i){this._map.hasLayer(i)&&(this._rightLayer=i)},this),e!==this._leftLayer&&(e&&this.fire("leftlayerremove",{layer:e}),this._leftLayer&&this.fire("leftlayeradd",{layer:this._leftLayer})),t!==this._rightLayer&&(t&&this.fire("rightlayerremove",{layer:t}),this._rightLayer&&this.fire("rightlayeradd",{layer:this._rightLayer})),this._updateClip()},_addEvents:function(){var e=this._range,t=this._map;!t||!e||(t.on("move",this._updateClip,this),t.on("layeradd layerremove",this._updateLayers,this),L.DomEvent.on(e,f(e),this._updateClip,this),L.DomEvent.on(e,"touchstart",a,this),L.DomEvent.on(e,"touchend",r,this),L.DomEvent.on(e,"mousedown",a,this),L.DomEvent.on(e,"mouseup",r,this))},_removeEvents:function(){var e=this._range,t=this._map;e&&(L.DomEvent.off(e,f(e),this._updateClip,this),L.DomEvent.off(e,"touchstart",a,this),L.DomEvent.off(e,"touchend",r,this),L.DomEvent.off(e,"mousedown",a,this),L.DomEvent.off(e,"mouseup",r,this)),t&&(t.off("layeradd layerremove",this._updateLayers,this),t.off("move",this._updateClip,this))}});L.control.sideBySide=function(e,t,i){return new L.Control.SideBySide(e,t,i)};m.exports=L.Control.SideBySide});E();})();
diff --git a/package.json b/package.json
index ad116a3..78203c2 100644
--- a/package.json
+++ b/package.json
@@ -3,22 +3,13 @@
   "version": "2.2.0",
   "description": "Compare two Leaflet layers side by side",
   "main": "index.js",
-  "browserify": {
-    "transform": [
-      "css-img-datauri-stream",
-      "cssify",
-      "browserify-shim"
-    ]
-  },
-  "browserify-shim": {
-    "leaflet": "global:L"
-  },
   "scripts": {
-    "build": "browserify index.js > leaflet-side-by-side.js",
-    "postbuild": "uglifyjs leaflet-side-by-side.js -cm -o leaflet-side-by-side.min.js",
+    "build": "npm run build:js && npm run build:min",
+    "build:js": "esbuild index.js --bundle --format=iife --platform=browser --target=es2018 --external:leaflet --loader:.css=text --outfile=leaflet-side-by-side.js",
+    "build:min": "esbuild index.js --bundle --format=iife --platform=browser --target=es2018 --external:leaflet --loader:.css=text --minify --outfile=leaflet-side-by-side.min.js",
     "preversion": "npm test && npm run build",
     "lint": "standard index.js",
-    "start": "budo index.js:leaflet-side-by-side.js --live",
+    "start": "esbuild index.js --bundle --format=iife --platform=browser --target=es2018 --external:leaflet --loader:.css=text --outfile=leaflet-side-by-side.js --servedir=. --watch",
     "test": "npm run lint"
   },
   "keywords": [
@@ -27,15 +18,10 @@
   "author": "Gregor MacLennan / Digital Democracy",
   "license": "MIT",
   "devDependencies": {
-    "browserify": "^16.2.2",
-    "budo": "^11.2.0",
-    "standard": "^11.0.1",
-    "uglify-js": "^3.3.24"
+    "esbuild": "^0.25.11",
+    "standard": "^17.1.2"
   },
   "dependencies": {
-    "browserify-shim": "^3.8.14",
-    "css-img-datauri-stream": "^0.1.5",
-    "cssify": "^1.0.3",
     "leaflet": ">=0.7.7 <2.0.0"
   },
   "repository": {
@@ -46,4 +32,4 @@
     "url": "https://github.com/digidem/leaflet-side-by-side/issues"
   },
   "homepage": "https://github.com/digidem/leaflet-side-by-side#readme"
-}
+}
\ No newline at end of file
diff --git a/range.css b/range.css
index faf5b64..fe69988 100644
--- a/range.css
+++ b/range.css
@@ -1,6 +1,6 @@
 .leaflet-sbs-range {
     -webkit-appearance: none;
-    display: inline-block!important;
+    display: inline-block !important;
     vertical-align: middle;
     height: 0;
     padding: 0;
@@ -12,23 +12,29 @@
     pointer-events: none;
     z-index: 999;
 }
+
 .leaflet-sbs-range::-ms-fill-upper {
     background: transparent;
 }
+
 .leaflet-sbs-range::-ms-fill-lower {
     background: rgba(255, 255, 255, 0.25);
 }
+
 /* Browser thingies */
 
 .leaflet-sbs-range::-moz-range-track {
     opacity: 0;
 }
+
 .leaflet-sbs-range::-ms-track {
     opacity: 0;
 }
+
 .leaflet-sbs-range::-ms-tooltip {
     display: none;
 }
+
 /* For whatever reason, these need to be defined
  * on their own so dont group them */
 
@@ -43,11 +49,12 @@
     cursor: ew-resize;
     pointer-events: auto;
     border: 1px solid #ddd;
-    background-image: url(range-icon.png);
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: 40px 40px;
 }
+
 .leaflet-sbs-range::-ms-thumb {
     margin: 0;
     padding: 0;
@@ -58,14 +65,15 @@
     cursor: ew-resize;
     pointer-events: auto;
     border: 1px solid #ddd;
-    background-image: url(range-icon.png);
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: 40px 40px;
 }
+
 .leaflet-sbs-range::-moz-range-thumb {
     padding: 0;
-    right: 0    ;
+    right: 0;
     background: #fff;
     height: 40px;
     width: 40px;
@@ -73,27 +81,32 @@
     cursor: ew-resize;
     pointer-events: auto;
     border: 1px solid #ddd;
-    background-image: url(range-icon.png);
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABlBMVEV9fX3///+Kct39AAAAAnRSTlP/AOW3MEoAAAA9SURBVFjD7dehDQAwDANBZ/+l2wmKoiqR7pHRcaeaCxAIBAL/g7k9JxAIBAKBQCAQCAQC14H+MhAIBE4CD3fOFvGVBzhZAAAAAElFTkSuQmCC);
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: 40px 40px;
 }
+
 .leaflet-sbs-range:disabled::-moz-range-thumb {
     cursor: default;
 }
+
 .leaflet-sbs-range:disabled::-ms-thumb {
     cursor: default;
 }
+
 .leaflet-sbs-range:disabled::-webkit-slider-thumb {
     cursor: default;
 }
+
 .leaflet-sbs-range:disabled {
     cursor: default;
 }
+
 .leaflet-sbs-range:focus {
-    outline: none!important;
+    outline: none !important;
 }
+
 .leaflet-sbs-range::-moz-focus-outer {
     border: 0;
-}
-
+}
\ No newline at end of file