HTML

<style>
.example-font-size {
  font-size: var(--example-font-size);
}
</style>

<bitty-7-0 data-connect="ChangeFontSize">
  <input 
    type="range" 
    data-init="setStartingFontSize"
    data-send="changeFontSize" 
    min="0.7"
    max="2.3"
    step="0.01"
  />
  <div class="example-font-size">Hello</div>
</bitty-7-0>

JavaScript

window.ChangeFontSize = class {
  setStartingFontSize(_, el) {
    const initialValue = 1.1;
    el.value = initialValue;
    this.api.setProp(
      `--example-font-size`,
      `${initialValue}rem`,
    );
  }

  changeFontSize(ev, _) {
    window.requestAnimationFrame(() => {
      const value = `${ev.value}rem`;
      this.api.setProp(`--example-font-size`, value);
    });
  }
};