The avatar for @soma
Soma Maroju
Public
Edited
Oct 19, 2023
Fork of Synchronized Inputs
Insert cell
Insert cell
Insert cell
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
Insert cell
Insert cell
viewof x = Inputs.range([0, 100], {step: 1})
Insert cell
Inputs.button([
["Set to 0", () => set(viewof x, 0)],
["Set to 100", () => set(viewof x, 100)]
])
Insert cell
x
Insert cell
Insert cell
viewof x
Insert cell
Insert cell
Insert cell
Inputs.bind(Inputs.range([0, 100]), viewof x)
Insert cell
This is a range input ${Inputs.bind(htl.html`<input type=range style="width: 80px;">`, viewof x)}.

This is a number input ${Inputs.bind(htl.html`<input type=number style="width: 80px;">`, viewof x)}.
Insert cell
Insert cell
viewof i = Inputs.input(42)
Insert cell
Inputs.bind(Inputs.range([0, 100]), viewof i)
Insert cell
Inputs.bind(Inputs.range([0, 100]), viewof i)
Insert cell
i
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more