text input to slider

NBTSolutions · Oct 9, 2017 · 8f60a8a · 8f60a8a
1 parent 6257193
commit 8f60a8a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/example/index.html b/example/index.html
@@ -19,7 +19,10 @@
     search: <input id="search" type="text"/>
   </div>
   <div>
-    set cache size: <input id="cache-size" type="text"/><button id="cache-size-button">set</button>
+    <div>
+      set cache size: <input id="cache-size-input" type="range" min="0" max="150" value="50"/>
+    </div>
+    <div>cache size: <span id="cache-size">50</span></div>
   </div>
   <div id="map"></div>
   <script src="index.js"></script>

diff --git a/example/index.js b/example/index.js
@@ -64,8 +64,9 @@ function main(geojson) {
       .forEach(id => vtLayer.setFeatureStyle(id, { color: 'black' }));
   };
 
-  document.getElementById('cache-size-button').onclick = e => {
-    const size = +document.getElementById('cache-size').value;
-    vtLayer.setTileCacheSize(size);
+  document.getElementById('cache-size-input').onchange = e => {
+    const cacheSize = +e.target.value;
+    document.getElementById('cache-size').innerHTML = cacheSize;
+    vtLayer.setTileCacheSize(cacheSize);
   };
 }