What is the idiomatic way of having two input elements both showing the value of the same variable and controlling it? E.g. a number that can be set both on a range slider and on a numeric input field, while both are reflecting its value.
I tried so far:
```
viewof number = html``
html``
```
…but the number input only displays the value, does not control it.
Moreover, it would be great if there was a way to formulate this as a “component”, i.e. reusable in other contexts (maybe as a function?)
Thank you in advance!
---
Combine the two inputs into a cell, and then use _input_ event listeners to coordinate changes between them. The _input_ events will bubble up so that `viewof` will respond to interaction on either input. You just need to set _element_.value on the element returned by the cell so that the desired value is exposed to other cells in the notebook.
Here’s some code:
```auto
viewof x = {
const div = html`
`;
const range = div.querySelector("[type=range]");
const number = div.querySelector("[type=number]");
div.value = range.value = number.value = 50;
range.addEventListener("input", () => number.value = div.value = range.valueAsNumber);
number.addEventListener("input", () => range.value = div.value = number.valueAsNumber);
return div;
}
```
And here’s a live demo: [https://beta.observablehq.com/@mbostock/linked-inputs](https://beta.observablehq.com/@mbostock/linked-inputs)
---