Thanks, purely as an FYI the triple backticks or </>
editor button are usually preferable to just indenting the block, because those methods can add syntax highlighting as well. (I’ve editing the post to use ```)
One immediate issue is this:
var active_labels = cb_obj.active.map((item) => cb_obj.labels[item])
The value of cb_obj
is whatever widget triggered the callback. Since you have attached the same callback to two widgets, that means the value of cb_obj
is different depending on whether the button or the slider was used. But a slider does not have an active
property, so the line above blows up when it was the slider. This can be seen in the browser dev tools:
The solution (to this one issue, at least) is to not use cb_obj
in this case, and instead pass both the widgets in the args
dict and refer to them explicitly using the separate names you assign them.
Also definitely look in to how to access your browsers JS console, dev tools, etc. Like any programming situation, the main key to debugging these callbacks is to be able to observe program state.