<script>
  let counter = 10
</script>

<label>In/decrease squares<input type="range" data-value="counter"></label>
<section data-for="i:counter">
  <div data-text="${i.index}"></div>
</section>

<script src="https://cdn.jsdelivr.net/gh/hbroek/reken/dist/reken.min.js">
</script>
section {
  display:flex;
  flex-wrap: wrap;
}
section>div {
  width: 30px;
  height: 30px;
  background: orange;
  margin: 1px;
  display:grid;
  align-items:center;
  justify-content:center;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.jsdelivr.net/gh/hbroek/reken/dist/reken.min.js