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 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.
