diff --git a/examples/controls.html b/examples/controls.html
index 76affe5fef..b991b00c37 100644
--- a/examples/controls.html
+++ b/examples/controls.html
@@ -4,15 +4,47 @@
 
         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
         <link rel="stylesheet" href="style.css" type="text/css" />
+    <link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev//resources/css/ext-all.css">
+
+    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script><script type="text/javascript">_uacct = "UA-1396058-1";urchinTracker();</script>
+    <link rel="stylesheet" type="text/css" href="http://www.extjs.com/deploy/dev//resources/css/xtheme-default.css" /><!-- LIBS -->
+    <script type="text/javascript" src="http://www.extjs.com/deploy/dev//adapter/ext/ext-base.js"></script>
+    <!-- ENDLIBS -->
+
+    <script type="text/javascript" src="http://www.extjs.com/deploy/dev//ext-all.js"></script>
+
+    <!-- Common Styles for the examples -->
+    <link rel="stylesheet" type="text/css" href="../shared/examples.css">
         <script src="../lib/OpenLayers.js"></script>
         <script type="text/javascript">
             var map;
+            function layerRenderAdditional(layerDiv, layer) {
+                var sliderDiv = document.createElement("div");
+                sliderDiv.className = "olControlLayerSwitcherLayerDivSlider";
+                layerDiv.appendChild(sliderDiv);    
+                sliderDiv.style.height="20px";
+                var sliderValue = layer.opacity == null ? 100 : layer.opacity * 100;
+                var slider = new Ext.Slider({renderTo: sliderDiv, width: 100, minValue: 0, maxValue: 100, animate: false});
+                slider.on("change", function(slider, newValue) {
+                    this.layer.setOpacity(newValue/100);
+                }, {layer: layer, control: this}); 
+                slider.on("dragstart", function(slider, e) { 
+                    this.control.isMouseDown = false; 
+                }, {control: this});  
+                if (this.maximizeDiv.style.display != "none") { 
+                    this.maximizeControl();
+                    slider.setValue(sliderValue);
+                    this.minimizeControl();
+                } else {
+                    slider.setValue(sliderValue);
+                }
+            }
             function init(){
                 map = new OpenLayers.Map('map', {
                     controls: [
                         new OpenLayers.Control.PanZoomBar(),
                         new OpenLayers.Control.MouseToolbar(),
-                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
+                        new OpenLayers.Control.LayerSwitcher({'ascending':false, layerRenderAdditional: layerRenderAdditional}),
                         new OpenLayers.Control.Permalink(),
                         new OpenLayers.Control.ScaleLine(),
                         new OpenLayers.Control.Permalink('permalink'),
diff --git a/lib/OpenLayers/Control/LayerSwitcher.js b/lib/OpenLayers/Control/LayerSwitcher.js
index 73c4b17852..65188e4d3e 100644
--- a/lib/OpenLayers/Control/LayerSwitcher.js
+++ b/lib/OpenLayers/Control/LayerSwitcher.js
@@ -254,6 +254,7 @@ OpenLayers.Control.LayerSwitcher =
             };
         }    
 
+        this.layerDivList = [];     
         var layers = this.map.layers.slice();
         if (!this.ascending) { layers.reverse(); }
         for( var i = 0; i < layers.length; i++) {
@@ -273,6 +274,10 @@ OpenLayers.Control.LayerSwitcher =
                 var checked = (baseLayer) ? (layer == this.map.baseLayer)
                                           : layer.getVisibility();
     
+                var layerDiv = document.createElement("div"); 
+                layerDiv.id = this.id+"_layerDiv_"+layer.id;
+                layerDiv.className = "olControlLayerSwitcherLayerDiv";
+
                 // create input element
                 var inputElem = document.createElement("input");
                 inputElem.id = "input_" + layer.name;
@@ -307,9 +312,6 @@ OpenLayers.Control.LayerSwitcher =
                     OpenLayers.Function.bindAsEventListener(this.onInputClick,
                                                             context)
                 );
-                // create line break
-                var br = document.createElement("br");
-    
                 
                 var groupArray = (baseLayer) ? this.baseLayers
                                              : this.dataLayers;
@@ -319,12 +321,16 @@ OpenLayers.Control.LayerSwitcher =
                     'labelSpan': labelSpan
                 });
                                                      
-    
+         
                 var groupDiv = (baseLayer) ? this.baseLayersDiv
                                            : this.dataLayersDiv;
-                groupDiv.appendChild(inputElem);
-                groupDiv.appendChild(labelSpan);
-                groupDiv.appendChild(br);
+                
+                layerDiv.appendChild(inputElem);
+                layerDiv.appendChild(labelSpan);
+                this.layerDivList.push(layerDiv);
+                groupDiv.appendChild(layerDiv);
+                
+                this.layerRenderAdditional(layerDiv, layer); 
             }
         }
 
@@ -334,9 +340,13 @@ OpenLayers.Control.LayerSwitcher =
         // if no baselayers, dont display the baselayer label
         this.baseLbl.style.display = (containsBaseLayers) ? "" : "none";        
 
+        
         return this.div;
     },
-
+    
+    layerRenderAdditional: function(layerDiv, layer) {
+    },
+    
     /** 
      * Method:
      * A label has been clicked, check or uncheck its corresponding input