Two views of one value

The sliders are HTML. The meters are a Textual application compiled to WebAssembly and running in this tab. Neither owns the levels: move a slider and the meter follows, press the arrow keys in the terminal and the slider follows.

starting…

What crosses

Three channels carrying numbers, one carrying an object the page never sends on, one carrying raw text. The page half is four lines:

const { bridge } = globalThis.textualWasm;

bridge.on("gain", (value) => { slider.value = value; });
slider.addEventListener("input", () => bridge.send("gain", Number(slider.value)));

and the application half is one, once per value: self.bridge.bind("gain", self, "gain"). The same code runs in a terminal, where there is no page and the channel is inert.