Is using a custom extension like a component a good idea?

[chronon]

I'm considering making use of app specific custom htmx extensions like the example below and was wondering if there are any drawbacks to this approach. I like that it easily lets me encapsulate everything related to the element the extension is attached to in it's own Ts/Js file.

<input type="range" hx-ext="hour-slider" min="0" max="7" step="1" value="0" />

Then my hour-slider extension could be something like this:

import htmx from 'htmx.org';

const ext = 'hour-slider';

(function () {
  htmx.defineExtension(ext, {
    onEvent: function (name, event) {
      if (name !== 'htmx:afterProcessNode') {
        return;
      }

      const el = event.target as HTMLElement;

      el.addEventListener('input', function (event) {
        const target = event.target as HTMLInputElement;
        // client side actions...
      });

      el.addEventListener('mouseup', function (event) {
        const target = event.target as HTMLInputElement;

        htmx
          .ajax('POST', '/somewhere', {
            swap: 'none',
            values: target.value
          })
          .then(() => {
            // do something...
          });
      });
    }
  });
})();