viewof a = input(0, 1)
viewof b = a
viewof c = b
c
c.raw
function input(min, max, stack = 10) {
if (!stack) return min;
const step = (max - min) / 10;
let slider;
const node = html`<div>
${min}
${(slider = html`<input
type="range"
min="${min}"
max="${max}"
step="${step}"
/>`)}
${max}
</div>`;
function update() {
const value = +slider.value;
node.value = input(value, value + step, stack - 1);
node.dispatchEvent(new CustomEvent("input"));
}
slider.oninput = update;
update();
return Object.assign(node, { raw: slider.value });
}
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.
