examples

change font size

• Set a font size with a slider.

html

<div class="custom-size">Hello, world</div>

<label>Font size:<br />
  <input data-r="initFontSize" data-s="setSize" type="range" min="0.5" max="3" step="0.01" />
</label>

javascript

export const b = { init: "initFontSize" };

export function initFontSize(_, __, el) {
  el.value = 1;
  b.setCSS("--custom-size", `1rem`);
}

export function setSize(ev, __, ___) {
  window.requestAnimationFrame(() => {
    b.setCSS("--custom-size", `${ev.target.valueAsFloat()}rem`);
  });
}

• Sends the initial font size to the slider via initFontSize.
• The b.setCSS() call sets the CSS property on the pages :root{}.
• The setSize function uses window.reqeustAnimationFrame() to throttle the updates from the slider.

styles

:root {
  --custom-size: 1rem;
}

.custom-size {
  min-height: 6rem;
  font-size: var(--custom-size);
}