md`This is a range input ${bind(html`<input type=range style="width:80px;">`, viewof apples)} with the value ${apples}.
This is a number input ${bind(html`<input type=number style="width:80px;">`, viewof apples)}.`
bind(html`<input type=range>`, viewof apples)
viewof apples = new View(3)
new Array(apples + 1).join("🍎")
function bind(input, view) {
const value = ["range", "number"].includes(input.type) ? "valueAsNumber" : "value";
const update = () => input[value] = view.value;
input.oninput = () => view.value = input[value];
view.addEventListener("input", update);
disposal(input).then(() => view.removeEventListener("input", update));
return update(), input;
}
import {View} from "@mbostock/synchronized-views"
import {disposal} from "@mbostock/disposal"
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.
