Cookbook snippet · tier 2

Range 輸入綁定

把 <input type=range> 接上即時數值讀出與重畫 callback。

Live example

font size 22 px

Spectral 在這個大小看起來怎麼樣?拉滑桿看實際渲染。

<output for="rib-fs"> 跟 slider 用 for 屬性關聯,瀏覽器把它當成「該 input 的計算結果」;預設帶 aria-live="polite",SR 會自動播報變動,不用自己加 ARIA。

slider 連結到兩個 DOM 節點:右上 <output>(顯示數字)+ 下方預覽 <p> 的 font-size(實際效果)。

完整食譜 (HTML + JS · 複製改寫用)

<input type="range"> paired with a live numeric readout and a redraw callback. Foundation of interactive-param-demo.

When to use

Any widget where the reader sweeps a continuous variable
Multiple sliders side-by-side for n-D sweeps
Pair with a derived display ("N=20 → 1.3 ms")

Complete snippet (paste-and-tweak)

<div class="vg-w-range-EXAMPLE">
  <style>
    .vg-w-range-EXAMPLE { display: flex; align-items: center; gap: var(--s-2); font-family: var(--sans); font-size: var(--fs-sm); }
    .vg-w-range-EXAMPLE input { flex: 1; accent-color: var(--accent); }
    .vg-w-range-EXAMPLE .readout { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 8ch; text-align: right; }
  </style>
  <label for="vg-w-range-EXAMPLE-x">N =</label>
  <input id="vg-w-range-EXAMPLE-x" type="range" min="1" max="100" step="1" value="20" />
  <span class="readout">20</span>
  <script>
    (function () {
      const root = document.querySelector('.vg-w-range-EXAMPLE');
      const inp = root.querySelector('input');
      const out = root.querySelector('.readout');
      function onInput() {
        const n = Number(inp.value);
        out.textContent = String(n);
        // call your redraw / recompute here
      }
      inp.addEventListener('input', onInput);
      onInput();
    })();
  </script>
</div>

Gotchas

Use input event, not change — change fires only on release; input fires per pixel of drag.
accent-color: var(--accent) styles the slider thumb to match the design system. Avoid custom ::-webkit-slider-thumb styling unless you need it — it's brittle across browsers.
step="any" for continuous — default step is 1 (integer).
Tabular numerals on readout prevents the layout from jittering as digits change width.
Mobile: range inputs work fine on touch, but the thumb is small. Consider style="height: 32px" on the input for tap targets.