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