Hide Table of Contents
View Change slider size sample in sandbox
Change slider size

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.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/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.22/"></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>