I was trying to use this inline input solution https://observablehq.com/@mbostock/inline-inputs which works great with one exception. I was trying to both bind the inline input and reference the viewof variable within the same cell. However, this makes the range slider stick. It seems to unfocus as soon as it makes a single step move.
Is this a limitation of the approach or Observable? I’d like understand what’s happening. Thank you, Observable Community!
This is a fork of @mbostock/inline-inputs to illustrate the issue:
Welcome! Here’s what’s happening in your notebook: when you drag the slider, the value of
apples changes, which forces all of its dependencies to re-render, including that markdown cell. So in fact, the range slider you were dragging is deleted and then recreated, explaining the loss of focus.
Here’s a fork that removes the
apples dependency by replacing
apples with a text element that has been bound to
In addition to @bgchen’s solution, you can say:
bind(html`<output>`, viewof apples)
But yes, when using inline inputs (and outputs!) like this, you need to opt-out of Observable’s default reactivity, or else it will re-evaluate the cell and re-create the input, breaking interaction.
Amazing! Thank you both for the quick reply. That’s an easy fix!