Newbie question: Update sliders from code, not UI

1

I’m still getting my feet wet here. Using the inputs library from @jashkenas, I’ve created some sliders as in the code below (the import statement is actually in its own cell at the bottom of the notebook - I just put it here for completeness). Suppose that the values are mathematically related, so when any slider is adjusted, I get notified that a change has occurred and which slider was adjusted, and then I compute new values for the other sliders. I want to set the other sliders to display these new values. I’ve not been able to work this out from the docs, examples, or doing tests. Can someone please show me the way?

import @jashkenas/inputs
viewof value_A = slider({min: -20, max: 20, value: 1})
viewof value_B = slider({min: -20, max: 20, value: 1})
viewof value_C = slider({min: -20, max: 20, value: 1})
2

Hi Andrew,

A couple of weeks ago, we had a similar question about wiring up multiple sliders that can affect each other in a more or less circular fashion.

Take a look at the notebooks linked here: Mutable values with multiple setters "bounce" forever

… and then let me know if you still have questions. Or! feel free to link the notebook that isn’t working for you yet.

3

Thank you! I’ve tried to replicate that using your slider() routine. This doesn’t give me any errors, but it doesn’t update the slider, either! I’m not sure how to link to a private notebook - here’s the URL I see in my browser: https://beta.observablehq.com/d/fae8e01fa16acdb1 If that doesn’t work, here’s the essential bit of the code. These two lines are in different cells. When I adjust the slider for line_A, I’d expect to see the slider for line_b move in response, but that slider does not update.

viewof line_A = slider({min: -20, max: 20, value: 1})
viewof line_m = slider({min: -20, max: 20, value: "${this ? line_A+1 : line_A / 2}"})
4

I’m afraid we can’t view your draft notebooks, but…

That looks like a simple " versus ` thing to me.

viewof line_m = slider({min: -20, max: 20, value: `${this ? line_A+1 : line_A / 2}`})

See a working example here:

5

Thank you! Right, backticks for template literals. I clearly need to refresh my Javascript chops.