Brain,
Here is the code for connecting the slider with the map:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style type="text/css">
html,
body {
height: 98%;
width: 98%;
margin: 0;
padding: 5px;
font-family: helvetica, arial, sans-serif;
font-size: 90%;
overflow: auto;
}
#content {
position: fixed;
top: 32px;
width: 100%;
height: 100%;
left: 0;
margin: 0;
border: 0;
}
#header {
position: fixed;
top: 0;
width: 100%;
height: 50px;
left: 0;
background: silver;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 35px;
left: 0;
background: silver;
}
#map {
position: fixed;
width: 100%;
height: 100%;
border: 0;
margin-left: -15px;
margin-top: -15px;
margin-right: -15px;
}
.claro .dijitButton .dijitButtonNode,
.claro .dijitDropDownButton .dijitButtonNode,
.claro .dijitComboButton .dijitButtonNode,
.claro .dijitToggleButton .dijitButtonNode {
border: 0;
padding: 1px 200px 1px 1px;
color: #000000;
border-radius: 0;
box-shadow: none;
background: none;
font-family: Calibri;
font-size: 15px;
}
.dijitSlider {
width: 200px;
}
</style>
<title> by befoley</title>
<script src="https://js.arcgis.com/3.17/"></script>
<script type='text/javascript'>
var map, toc, basemap, dynaLayer1;
require([
"dojo/dom",
"dojo/parser",
"dojo/on",
"dojo/_base/lang",
"esri/map",
"esri/geometry/Extent",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/HorizontalSlider",
"dojo/domReady!"
],
function(
dom, parser, on, lang,
Map, Extent, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
BorderContainer, ContentPane, HorizontalSlider
) {
parser.parse();
var initialExtent = new esri.geometry.Extent({
"xmin": -13133567.66,
"ymin": 3996227.94,
"xmax": -13031753.54,
"ymax": 4087952.37,
"spatialReference": {
"wkid": 102100
}
});
map = new Map("map", {
basemap: "streets",
extent: initialExtent,
smartNavigation: false,
logo: false,
showAttribution: false,
zoom: 14,
slider: false
});
map.on("layers-add-result", initSlider);
function initSlider() {
var slider = new HorizontalSlider({
map: map,
value: (map.getLevel() + 1),
minimum: 0,
maximum: 17,
intermediateChanges: true,
discreteValues: 17
}, dojo.byId("slider"));
on(slider, "change", lang.hitch(this, function(evt){
map.setLevel(parseInt(slider.value, 10));
}));
}
dynaLayer1 = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer", {
opacity: 0.8
});
map.addLayers([dynaLayer1]);
}
);
</script>
</head>
<body>
<div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true">
<div id="header"></div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" region="center"></div>
</div>
<div id="footer">
<div id="slider" style="position:absolute;left:650px;top:5px;vertical-align:middle;"></div>
</div>
</body>
</html>