Use a range input to select the number of steps (1 to 8)

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);
 }

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>
 

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);