How to update an Observable Input programmatically in notebook 2.0?

Help
1

I have been trying to adapt these first 3 cells from the Synchronized Inputs documentation to work in notebook 2.0, but without success:

function set(input, value) {
  input.value = value;
  input.dispatchEvent(new Event("input", {bubbles: true}));
}

viewof x = Inputs.range([0, 100], {step: 1})

Inputs.button([
  ["Set to 0", () => set(viewof x, 0)],
  ["Set to 100", () => set(viewof x, 100)]
])

What should replace viewof x inside set(viewof x, 0) or is there a better 2.0 pattern for programmatic control of reactive values? I often used Inputs.input in my 1.0 notebooks with this set() function.

2

You are asking how to implement synchronized inputs in Vanilla JavaScript (rather than Observable JavaScript), right?

The main thing is that you need to separate the input (the range slider; the interface control) from the reactive input value (which in Observable is expressed as a Generator). This means you need to define two top-level variables:

const xInput = Inputs.range([0, 100], {step: 1});
const x = view(xInput);

You can then set the value of xInput programmatically like so:

set(xInput, 42);

Or, wired up to buttons:

Inputs.button([
  ["Set to 0", () => set(xInput, 0)],
  ["Set to 100", () => set(xInput, 100)]
])

Additionally… that first cell is exactly equivalent to:

const xInput = display(Inputs.range([0, 100], {step: 1}));
const x = Generators.input(xInput);

Hope this helps!

3

Perfect, thanks!