Be careful about using addEventListener to listen to views. If you do, you also need to use the invalidation promise to remove your listener when the cell is invalidated, or else your old cells will continue to run indefinitely.
And viewof doesn’t work if you put text after your input:
viewof inpA = html`<input type="range">A`
The viewof operator needs an element that has a value, such as an INPUT element or a FORM. The above cell has an implicit SPAN element because the html template literal needs to wrap everything in an element.
You can use Jeremy’s inputs for a nice labeled range, or you can create a nice input yourself using a FORM element. See this recent example.
But getting back to the heart of the issue: if you want to “detect changes” or otherwise employ side-effects such as transitions, I recommend that the cell that wants to detect changes expose one or more update functions that you call from other cells. Here’s my fork of your notebook:
Here, the display cell returns your two DIV elements (again wrapped in an implicit SPAN), that has an update method exposed. This update method is called by two side-effect cells when inpA or inpB changes.
display.update("A", inpA)
display.update("B", inpB)
Thus, the display cell can react selectively to either of these inputs and transition appropriately. You can see this technique in use here: