Create a html input slider to set the current html document root font-size

RootFontSizeSlider.js

{
  // Create a html input slider to set the current html document root font-size
  // @returns the ref to the inserted DOM element
  const createRootFontSizeSlider = (min = 8, max = 18) => {
    const i = document.createElement("input")
    i.type = "range"
    i.min = `${min}`
    i.max = `${max}`
    i.step = "0.01"
    i.style = "position: fixed; bottom: 24px; right: 24px; z-index: 2147483647"
    i.value = `${parseFloat(getComputedStyle(document.documentElement).fontSize)}`
    i.addEventListener("input", () => {
      document.documentElement.style.setProperty("font-size", `${i.value}px`)
    })
    document.body.append(i)
    return i
  }
  // call it with whatever min / max pixel size you want, or none to use defaults
  const ref = createRootFontSizeSlider()
}