GeoExt.LayerOpacitySlider

The LayerOpacitySlider allows control of a layer opacity using an Ext.Slider. It is also possible to add a special tooltip plugin, LayerOpacitySliderTip, which will show the opacity value while dragging the slider (the content is configurable).

In this example, the slider in below the map is in aggressive mode: the opacity is changed as soon as the slider is moved. The slider inside Map 1 is not aggressive: the opacity is changed when the slider is released. Also, the slider below the map is an inverse slider, which means it uses transparency instead of opacity.

In Map 2 we have a fading effect between two layers. The slider is configured with changeVisibility:true and a complementaryLayer. This avoids downloading images when layer opacity is 0 or when complementaryLayer is fully covered by layer. The effect on layer visibility is shown in the tree (checkboxes).

The js is not minified so it is readable. See layeropacityslider.js.