title: Jquery Slider UI for displaying Overlay Layer in OpenLayers based on Opacity
body: <p>this may seem to be repeated question, as i have gone through many question already available, but as am new to Openlayers, i am not able to get, how should I set my Openlayers with jquery slider, I am able to position it, but it is not working.</p>
  
  <p>I have baske map of OSM and overlay layer is of .png, i wanted to check for opacity so that i caqn check base layer also.</p>
  
  <p>if possible someone could guide.</p>
  
  <pre><code> &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Web Urban Atlas&lt;/title&gt;
    &lt;link type= text/css rel = stylesheet href="index_style.css" /&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="http://openlayers.org/api/2.13.1/OpenLayers.js"&gt;&lt;/script&gt;
    &lt;script src='http://maps.google.com/maps/api/js?v=3.2&amp;amp;sensor=false' type='text/javascript'&gt;&lt;/script&gt;
    &lt;script type= "text/javascript" src="main_functions.js"&gt;&lt;/script&gt;
    &lt;script&gt; 
   defaultLatCenter = 23;
   defaultLonCenter = 77;
   defaultZoom = 5;
  
   proj4326 = new OpenLayers.Projection("EPSG:4326");
   proj900913 = new OpenLayers.Projection("EPSG:900913");
  
   init = function() {
     gphy = new OpenLayers.Layer.Google("Google Physical", {
       type: google.maps.MapTypeId.TERRAIN
       });
     osm = new OpenLayers.Layer.OSM("openstreetmap");
     map = new OpenLayers.Map("map");
     map.addControl(new OpenLayers.Control.LayerSwitcher());
     map.addLayers([gphy, osm]);
     map.setCenter(new OpenLayers.LonLat(defaultLonCenter, defaultLatCenter).transform(proj4326, map.getProjectionObject()), defaultZoom);
  
  
     bounds = new OpenLayers.Bounds();
     bounds.extend(new OpenLayers.LonLat(76.8027, 28.9642));
     bounds.extend(new OpenLayers.LonLat(77.5936, 28.1847));
     bounds.transform(proj4326, map.getProjectionObject());
     radar_overlay = new OpenLayers.Layer.Image('1992_delhi', '1992.png', bounds, new OpenLayers.Size(2706, 2669), {
       'isBaseLayer': false,
       'alwaysInRange': true
     });
     map.addLayer(radar_overlay);
     radar_overlay.setZIndex(150);
     radar_overlay.setOpacity(0.7);
  
   };
  
  function gotodelhi(){
   // map extent
   var extent = new OpenLayers.Bounds(76.8027, 28.9642, 77.5936, 28.1847).transform(proj4326, proj900913);
  map.zoomToExtent(extent);
  }
  
  function gotomumbai(){
   // map extent
   var extent = new OpenLayers.Bounds(72.778333, 19.449444, 73.175278, 18.857222).transform(proj4326, proj900913);
  map.zoomToExtent(extent);
  }
  function gotobangalore(){
   // map extent
   var extent = new OpenLayers.Bounds(77.401389, 13.139167, 77.853333, 12.769722).transform(proj4326, proj900913);
  map.zoomToExtent(extent);
  }
  &lt;/script&gt;
    &lt;style&gt;
  html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  }
  &lt;/style&gt;
  &lt;script&gt;
    $(function() {
      $( "#accordion" ).accordion();
    });
    &lt;/script&gt;
     &lt;script&gt;
    $(function() {
      $( "#slider-vertical" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.value );
        }
      });
      $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
    });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="init()"&gt;
  &lt;div id="header" style= "width: 100%;height:20%;"&gt;
  &lt;h2&gt;Urban Atlas&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div id="map" style= "width:80%;height:70%;float:right;"&gt;
  &lt;/div&gt;
  &lt;div id="accordion" style="width:20%"&gt;
   &lt;h3 id= "Bangalore" onclick=gotobangalore()&gt;Bangalore&lt;/h3&gt;
   &lt;div&gt;
      &lt;p&gt;
    Bangalore is city of gardens
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;h3 id="setDelhi" onclick=gotodelhi()&gt; delhi &lt;/h3&gt;
    &lt;div&gt;
      &lt;p&gt;
    Content For delhi
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;h3 id="setMumbai" onclick=gotomumbai()&gt;mumbai&lt;/h3&gt;
    &lt;div&gt;
      &lt;p&gt;
    Content for mumbai
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="slider-vertical" style="height:200px;float:right"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>