The avatar for @bryangingechen
Bryan Gin-ge Chen
here to learn
Published unlisted
Edited
Sep 10, 2019
Insert cell
Insert cell
Changed in target
-
md`This is a range input ${bind(html`<input type=range style="width:80px;">`, viewof apples)} with the value ${apples}.

+
md`This is a range input ${bind(html`<input type=range style="width:80px;">`, viewof apples)} with the value ${bindText(html`${viewof apples.value}`, viewof apples)}.


This is a number input ${bind(html`<input type=number style="width:80px;">`, viewof apples)}.`
Insert cell
Insert cell
bind(html`<input type=range>`, viewof apples)
Insert cell
Insert cell
viewof apples = new View(3)
Insert cell
Insert cell
new Array(apples + 1).join("🍎")
Insert cell
Insert cell
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;
}
Insert cell
Added in target
function bindText(el, view) {
const update = () => el.textContent = view.value;
view.addEventListener("input", update);
disposal(el).then(() => view.removeEventListener("input", update));
return update(), el;
}
Insert cell
import {View} from "@mbostock/synchronized-views"
Insert cell
import {disposal} from "@mbostock/disposal"
Insert cell