transparencySlider

by jagravois

HTML

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Basemaps with an Opacity Slider</title>
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }      
      
      #map{ padding: 0; }
      
      #sliderWrapper {
        position:absolute; 
        right: 30px; 
        top:30px; 
        z-Index: 40;

        width: 250px;
        height: 50px;
        background: #fff;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      #sliderLabels {
        position: relative; 
        top: -1px; 
        height: 1.2em; 
        font-size: 80%; 
        font-weight: bold;
        font-family: arial;
        color: #444;
        padding: 3px;
        margin: 5px 10px 0 10px;
      }
    </style>
    <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script>
    <script type="text/javascript" src="http://js.arcgis.com/3.8/"></script>
    <script type="text/javascript">
      require([
      		"esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            
            "dojo/on",
            "dijit/registry",
      		"dijit/layout/BorderContainer",
      		"dijit/layout/ContentPane",
            "dijit/form/HorizontalSlider",
            "dijit/form/HorizontalRuleLabels"],
      	function (Map, ArcGISTiledMapServiceLayer, on, registry) {     	
      	
            var map = new esri.Map("map", {
          ...