diff --git a/index.html b/index.html
index 338f5aa..a096b2d 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
         <div id="map" style="width: 100%; height: 100%; background: black"></div>
         <div id="text" style="position: absolute; left: 50px; top: 10px; width: auto; color: white">
         </div>
+        <div id="slider-wrapper"><input id="zoom-slider" type="range" min="0" max="20" value="0" step="1" /></div>
     </div>
 <script src="map.js"></script>
 </body>
diff --git a/map.js b/map.js
index ff55cde..c024540 100644
--- a/map.js
+++ b/map.js
@@ -272,4 +272,10 @@ var polyline = L.polyline(xpath, {color: '#dd2e57'}).addTo(map);
 
 map.setView(xy(0.5 * TILESIZE, -0.5 * TILESIZE), 0);
 
+var zoomslider = document.getElementById("zoom-slider");
+zoomslider.addEventListener("input", function () {
+  // console.log("zoom", zoomslider.value);
+  map.flyTo([-128.0,128],zoomslider.value);
+})
+
 })();
diff --git a/styles.css b/styles.css
index 6c2451f..231dc92 100644
--- a/styles.css
+++ b/styles.css
@@ -85,3 +85,22 @@ p.caption a.url:hover {
   /*background: #FF0;*/
   /*color: black;*/
 }
+
+#slider-wrapper {
+  display: inline-block;
+/*  width: 20px;
+  height: 150px;
+*/  padding: 0;
+  position: absolute;
+  left: 15px;
+  top: 100px;
+  z-index: 1000;
+}
+
+#slider-wrapper input {
+  width: 150px;
+  height: 20px;
+  margin: 0;
+  transform-origin: 75px 75px;
+  transform: rotate(-90deg);
+}
\ No newline at end of file