sync slider with buttons, expose more options

LeafletOpacityDemo.html

@@ -58,21 +58,26 @@
         });
 
 
-
+        var options = {
+            position: "bottomright",
+            max: 1000,
+            animate: "slow",
+            init_opac: 0.5
+        }
     //Create the opacity controls
-        var higherOpacity = new L.Control.higherOpacity();
+        var higherOpacity = new L.Control.higherOpacity(options);
         map.addControl(higherOpacity);
-        var lowerOpacity = new L.Control.lowerOpacity();
+        var lowerOpacity = new L.Control.lowerOpacity(options);
         map.addControl(lowerOpacity);
-        var opacitySlider = new L.Control.opacitySlider();
+        var opacitySlider = new L.Control.opacitySlider(options);
         map.addControl(opacitySlider);
 
     //Specify the layer for which you want to modify the opacity. Note that the setOpacityLayer() method applies to all the controls.
     //You only need to call it once. 
         opacitySlider.setOpacityLayer(historic_seattle);
 
     //Set initial opacity to 0.5 (Optional)
-        historic_seattle.setOpacity(0.5);
+        historic_seattle.setOpacity(options.init_opac);
 	</script>
 </body>
 </html>

lib/opacity/Control.Opacity.js

@@ -55,27 +55,32 @@ L.Control.opacitySlider = L.Control.extend({
         position: 'topright'
     },
     setOpacityLayer: function (layer) {
-            opacity_layer = layer;
+        opacity_layer = layer;
     },
     onAdd: function (map) {
         var opacity_slider_div = L.DomUtil.create('div', 'opacity_slider_control');
 
+        // If an initial opacity is set, set slider to corresponding value
+        var max = this.options.max ? this.options.max : 100;
+        var value;
+        if (this.options.init_opac) value = this.options.init_opac * max;
         $(opacity_slider_div).slider({
           orientation: "vertical",
-          range: "min",
+          range: this.options.range ? this.options.range : "min",
           min: 0,
-          max: 100,
-          value: 60,
-          step: 10,
+          max: max,
+          value: value ? value : 60,
+          step: max/5,
+          animate: this.options.animate ? this.options.animate : "fast",
           start: function ( event, ui) {
             //When moving the slider, disable panning.
             map.dragging.disable();
-            map.once('mousedown', function (e) { 
+            map.once('mousedown', function (e) {
               map.dragging.enable();
             });
           },
           slide: function ( event, ui ) {
-            var slider_value = ui.value / 100;
+            var slider_value = ui.value / max;
             opacity_layer.setOpacity(slider_value);
           }
         });
@@ -88,32 +93,46 @@ L.Control.opacitySlider = L.Control.extend({
 function onClickHigherOpacity() {
     var opacity_value = opacity_layer.options.opacity;
 
-    if (opacity_value > 1) {
+    if (opacity_value >= 1) {
         return;
     } else {
         opacity_layer.setOpacity(opacity_value + 0.2);
+        // Set slider value, if slider is available
+        var slider = $(".opacity_slider_control");
+        if (slider && slider.length) {
+          var cur_val = slider.slider("value");
+          var step = slider.slider("option").step;
+          slider.slider("value", cur_val + step);
+        }
         //When you double-click on the control, do not zoom.
+        var map = opacity_layer._map;
         map.doubleClickZoom.disable();
-        map.once('click', function (e) { 
+        map.once('click', function (e) {
             map.doubleClickZoom.enable();
         });
     }
-
 }
 
 function onClickLowerOpacity() {
     var opacity_value = opacity_layer.options.opacity;
 
-    if (opacity_value < 0) {
+    if (opacity_value <= 0) {
         return;
     } else {
         opacity_layer.setOpacity(opacity_value - 0.2);
+        // Set slider value, if slider is available
+        var slider = $(".opacity_slider_control");
+        if (slider && slider.length) {
+          var cur_val = slider.slider("value");
+          var step = slider.slider("option").step;
+          slider.slider("value", cur_val - step);
+        }
         //When you double-click on the control, do not zoom.
+        var map = opacity_layer._map;
         map.doubleClickZoom.disable();
-        map.once('click', function (e) { 
+        map.once('click', function (e) {
             map.doubleClickZoom.enable();
         });
-    }
-
+    }  
 }