Create "grid-like" row and column selector for table generator

Question

I am creating a Figma plugin that generates table according to user's preferences. UI of plugin is in pure HTML, CSS and JavaScript.

So far I have a simple UI with range inputs that look like this for choosing how many columns and rows user wants in the table:

Code:

<fieldset>
<legend>Dimensions</legend>
  <p>
    <label for="countRows">Number of Rows:</label> 
    <input class="range" id="countRows" name="countRows" type="range" value="3" min="0" max="10" oninput="this.nextElementSibling.value = this.value">
    <output>3</output>
  </p>
  <p>
    <label for="countColumns">Number of Columns:</label> 
    <input class="range" id="countColumns" name="countColumns" type="range" value="5" min="1" max="10" oninput="this.nextElementSibling.value = this.value">
    <output>5</output>
  </p>
</fieldset>

I am looking for a "grid-like" solution on choosing how many rows and columns table should have, similar to what Microsoft Word has:

Do you have any hints where to find more info about this type of solution?