Add padding option

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## Unreleased
 
 - ADDED: Add `setLeftLayers()` and `setRightLayers()` methods
+- ADDED: `options.padding`
 - FIXED: **[BREAKING]** Export factory function on `L.control` not `L.Control`
 
 ## [v1.1.1] - 2015-12-03

README.md

@@ -14,6 +14,8 @@ Creates a new Leaflet Control for comparing two layers or collections of layers.
 | ----------    | -------------- | ------------- |
 | `leftLayers`  | L.Layer\|array | A Leaflet Layer or array of layers to show on the left side of the map. Any layer added to the map that is in this array will be shown on the left |
 | `rightLayers` | L.Layer\|array | A Leaflet Layer or array of layers to show on the right side of the map. Any layer added to the map that is in this array will be shown on the right. These *should not be* the same as any layers in `leftLayers` |
+| `options`     | Object         | Options |
+| `options.padding` | Number     | Padding between slider min/max and the edge of the screen in pixels. Defaults to `44` - the width of the slider thumb |
 
 ### Events
 

index.js

@@ -43,9 +43,15 @@ function noop () {
 }
 
 L.Control.SideBySide = L.Control.extend({
-  initialize: function (leftLayers, rightLayers) {
+  options: {
+    thumbSize: 42,
+    padding: 0
+  },
+
+  initialize: function (leftLayers, rightLayers, options) {
     this.setLeftLayers(leftLayers)
     this.setRightLayers(rightLayers)
+    L.setOptions(this, options)
   },
 
   getPosition: noop,
@@ -67,6 +73,7 @@ L.Control.SideBySide = L.Control.extend({
     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
@@ -101,7 +108,7 @@ L.Control.SideBySide = L.Control.extend({
     var rangeValue = this._range.value
     var nw = map.containerPointToLayerPoint([0, 0])
     var se = map.containerPointToLayerPoint(map.getSize())
-    var offset = (0.5 - rangeValue) * 44
+    var offset = (0.5 - rangeValue) * (2 * this.options.padding + this.options.thumbSize)
     var clipX = nw.x + (se.x - nw.x) * rangeValue + offset
     var dividerX = map.getSize().x * rangeValue + offset