DEV Community

Said Metiche
Said Metiche

Posted on

Making a Clean, friendly Spinner in Go/Templ

The unhelpful HTML

You guys might think that making a consistent, clean and professional spinbox would be a simple task in HTML... However, to our despair, there is no standard attrib to tell an input that it should only accept integer or decimal values, all input filtering must be JS. Outch!

I'm going to be implementing this functionality with Go, a-h/Templ, Tailwind and my beloved Alpine.js to make life easy.

Adding the Skeleton

We start by writing a basic template for our integer spinbox:


templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  ...
}
Enter fullscreen mode Exit fullscreen mode

We define IntInterval as follows:

type IntInterval struct {
  A, B int
}
Enter fullscreen mode Exit fullscreen mode

With the interval, we will set min and max of the input. As we are making an integer spinbox, the step will always be set to '1'.

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  <input type="number" placeholder="Enter Int…"
    step="1"
    if interval != nil {
      min={ strconv.Itoa(interval.A) }
      max={ strconv.Itoa(interval.B) }
    } ...>
}
Enter fullscreen mode Exit fullscreen mode

Adding CSS

Let's now start adding some tw classes, following are some special properties and pseudo-elements that control the rendering of the input.
select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]

The following extra classes are used to remove the default spinner buttons:
[&::-webkit-inner-spin-button]:[-webkit-appearance:none] [&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance:textfield]

Finally, let's add some basic padding, ring, colors, etc...
block w-full rounded-l-md py-2 px-2.5 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6

Adding it to our template, we get the following:

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  <input type="number" placeholder="Enter Int…"
    step="1"
    if interval != nil {
      min={ strconv.Itoa(interval.A) }
      max={ strconv.Itoa(interval.B) }
    }
    class="block w-full rounded-l-md py-2 px-2.5 text-gray-900 ring-1
 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none
 focus:ring-2 focus:ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6
 select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none]
 [-webkit-user-select:none] [&::-webkit-inner-spin-button]:[-webkit-appearance:none] 
[&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance:textfield]">
}
Enter fullscreen mode Exit fullscreen mode

Now you should get a very text-like input, with some basic validation if you hover your mouse over it. We will add the functionality to check for valid integer inputs in the next section.

Implementing the Filter

The basic idea of an integer spinbox is of an input that only accepts integers. I initially attempted to implement this function by using HTML's pattern attribute as follows:

<input type="number" pattern="[0-9]+" ... >
Enter fullscreen mode Exit fullscreen mode

The pattern attribute takes a regex string and uses it to validate the user input, however, it doesn't prevent invalid input from being entered in the first place. Actually, it was made for some simple client-side validation.

The 'oninput' event

Every time the user presses any key inside the input box, a oninput event is generated. capture this event with Alpine's syntax x-on:input and rectify the value accordingly for the input element. Let's create a parent div with an x-data attrib set, and add a function that will allow us to check if input is at all a Number... After which we can round the value accordingly.

<div x-data="{isNumber(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }}">
  <input ... x-on:input="$el.value = isNumber($el.value) ? Math.round($el.value) : null">
</div>
Enter fullscreen mode Exit fullscreen mode

For those who don't know Alpine, $el here is used to refer to the current DOM element.

Custom Spinners

In the parent div created previously, we add the following class="flex" and add an x-ref="spinbox" attrib to the input so that our buttons can modify it's state through the magic property $refs.spinbox:

<div ... class="flex">
  <input ... x-ref="spinbox">
</div>
Enter fullscreen mode Exit fullscreen mode

We then add a new child after the input, which will contain our buttons:

<div ...>
  <input ... x-ref="spinbox">
  <div class="flex flex-col-reverse">
    <!-- Decrement input's value -->
    <button type="button" class="flex-1 ...">-</button>
    <!-- Increment input's value -->
    <button type="button" class="flex-1 ...">+</button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Here, we use flex-col-reverse as an easy way to keep the tab order correct, it should first tab to '-', then '+'.

We then add the event handlers to the buttons using x-on:click, the full code (excluding CSS) is as follows:

<div ... x-data="{
        inc() { var e = $refs.spinbox; e.value = Math.min(Number(e.value) + Number(e.step), e.max); },
        dec() { var e = $refs.spinbox; e.value = Math.max(Number(e.value) - Number(e.step), e.min); },
        isNumber(n) { return !isNaN(parseFloat(n)) && !isNaN(n - 0) }
      }">
  <input ... x-ref="spinbox" x-on:input="$el.value = isNumber($el.value) ? Math.round($el.value) : null">
  <div ...>
    <!-- Decrement input's value -->
    <button type="button" ... x-on:click="dec">-</button>
    <!-- Increment input's value -->
    <button type="button" ... x-on:click="inc">+</button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

We have to convert e.value and e.step before doing any arithmetic as those are strings.

When it comes to CSS for the spinners buttons, they are styled very similarly to the input, the full code is below .

Spinbox tabs baby!

The final template

templ IntSpinbox(name, label, value, tooltip string, saveinput bool, interval *IntInterval) {
  <!-- Disable inner & outer spinner buttons, use buttons to render increment and decrement input value... -->
  <div class="flex-1">
    @InputLabel(name, label + " " + interval.toString(), tooltip)

    <input type="number" placeholder="Enter Int…" step="1"
        if interval != nil {
          min={ strconv.Itoa(interval.A) } max={ strconv.Itoa(interval.B) }
        }
        name={ name } value={ value }
        class="block w-full rounded-l-md py-2 px-2.5 text-gray-900 ring-1
 ring-inset ring-gray-300 placeholder:text-gray-400 focus:outline-none
 focus:ring-2 focus:ring-primary-400 bg-gray-50 sm:text-sm sm:leading-6
 select-none [-moz-user-select:none] [-ms-user-select:none] [-o-user-select:none]
 [-webkit-user-select:none] [&::-webkit-inner-spin-button]:[-webkit-appearance:none] 
[&::-webkit-outer-spin-button]:[-webkit-appearance:none] [-moz-appearance:textfield]"
        x-on:input="$el.value = !isNumber($el.value) ? null : Math.round($el.value)"
        x-ref="spinbox"
        autocomplete="off"
        >

        <div class="flex flex-col-reverse font-medium">
          <!-- Decrement input's value -->
          <button type="button" class="flex-1 px-1 leading-none
 transition-colors ease-linear duration-100 rounded-br-md text-center
 text-sm bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-900
 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-inset
 focus:ring-2 focus:ring-primary-400 select-none [-moz-user-select:none]
 [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]" x-on:click="dec">-</button>
          <!-- Increment input's value -->
          <button type="button" class="flex-1 px-1 leading-none
 transition-colors ease-linear duration-100 rounded-tr-md text-center
 text-sm bg-gray-100 hover:bg-gray-200 text-gray-500 hover:text-gray-900
 ring-1 ring-inset ring-gray-300 focus:outline-none focus:ring-inset
 focus:ring-2 focus:ring-primary-400 select-none [-moz-user-select:none]
 [-ms-user-select:none] [-o-user-select:none] [-webkit-user-select:none]" x-on:click="inc">+</button>
        </div>
    </div>
  </div>
}
Enter fullscreen mode Exit fullscreen mode

Enjoy :)

Works on

  • Mozilla Firefox 130.0 (64-bit)
  • Version 128.0.6613.120 (Official Build) (64-bit)

Top comments (1)

Collapse
 
khalil_ali profile image
Khalilali

Very helpful. Great work πŸ‘