Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Change slider size
Explore in the sandbox
Open in CodePen
View live sample
Description
You can change the zoom level slider size by overriding default CSS classes. Refer to the style tag in the head of the sample for specifics.
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Map Slider Position and Size</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
.esriLargeSliderVertical {
height: 100px;
}
.esriLargeSliderTR {
right: 10px;
top: 10px;
}
#map {
border:1px solid #000;
height:250px;
width: 250px;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
function init() {
var map = new esri.Map("map", {
showAttribution: false,
sliderPosition: "top-right",
sliderStyle: "large"
});
map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"));
}
dojo.ready(init);
</script>
</head>
<body class="claro">
Configure map slider's position and size
<div id="map"></div>
</body>
</html>