function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true })); // Native events bubble, so we should too
}
MyInput = ({value = 0} = {}) => {
const output = htl.html`<output>`;
const node = htl.html`<div>
<button onclick=${() => set(node, value - 1)}>−</button>
<button onclick=${() => set(node, value + 1)}>+</button>
My value is ${output}
</div>`;
// Update the display whenever the value changes
Object.defineProperty(node, "value", {
get() {
return value;
},
set(v) {
output.value = value = +v;
}
});
// Set the initial value
node.value = value;
return node;
}
viewof example = MyInput()
example
Inputs.bind(Inputs.range([-10, 10], {step: 1}), viewof example)
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.
