From 03a16e34445f2407f87ccb06b597f14a5c7f7f69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= <maxi_kroeg@web.de>
Date: Sat, 6 Aug 2022 23:07:25 +0200
Subject: [PATCH] Use a range input to select the number of steps (1 to 8)

---
 examples/scale-line.css  | 4 ++++
 examples/scale-line.html | 8 ++------
 examples/scale-line.js   | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/examples/scale-line.css b/examples/scale-line.css
index e995aba680..aa432f70c8 100644
--- a/examples/scale-line.css
+++ b/examples/scale-line.css
@@ -2,6 +2,10 @@
   display: none;
 }
 
+input[type=range] {
+  vertical-align: middle;
+}
+
 .ol-scale-bar-inverted .ol-scale-singlebar-even {
   background-color: var(--ol-background-color);
 }
diff --git a/examples/scale-line.html b/examples/scale-line.html
index 3d601b7049..b0c1e8e937 100644
--- a/examples/scale-line.html
+++ b/examples/scale-line.html
@@ -23,12 +23,8 @@ tags: "scale-line, openstreetmap"
 </select>
 
 <div id="scaleBarOptions">
-  <select id="steps">
-    <option value=2>2 steps</option>
-    <option value=4 selected>4 steps</option>
-    <option value=6>6 steps</option>
-    <option value=8>8 steps</option>
-  </select>
+  <label for="steps">Steps:</label>
+  <input id="steps" type="range" value="4" min="1" max="8">
 
   <label><input type="checkbox" id="showScaleText" checked> Show scale text</label>
 
diff --git a/examples/scale-line.js b/examples/scale-line.js
index 7405e9b785..1af31da8f5 100644
--- a/examples/scale-line.js
+++ b/examples/scale-line.js
@@ -7,7 +7,7 @@ import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js';
 const scaleBarOptionsContainer = document.getElementById('scaleBarOptions');
 const unitsSelect = document.getElementById('units');
 const typeSelect = document.getElementById('type');
-const stepsSelect = document.getElementById('steps');
+const stepsRange = document.getElementById('steps');
 const scaleTextCheckbox = document.getElementById('showScaleText');
 const invertColorsCheckbox = document.getElementById('invertColors');
 
@@ -23,7 +23,7 @@ function scaleControl() {
     control = new ScaleLine({
       units: unitsSelect.value,
       bar: true,
-      steps: parseInt(stepsSelect.value, 10),
+      steps: parseInt(stepsRange.value, 10),
       text: scaleTextCheckbox.checked,
       minWidth: 140,
     });
@@ -61,6 +61,6 @@ function onInvertColorsChange() {
 }
 unitsSelect.addEventListener('change', onChangeUnit);
 typeSelect.addEventListener('change', reconfigureScaleLine);
-stepsSelect.addEventListener('change', reconfigureScaleLine);
+stepsRange.addEventListener('input', reconfigureScaleLine);
 scaleTextCheckbox.addEventListener('change', reconfigureScaleLine);
 invertColorsCheckbox.addEventListener('change', onInvertColorsChange);