🏠 back to Observable

Multi-slider input


#1

@jashkenas I have been able to make a nice custom slider from yours, thank you! See the “scale” slider in the notebook below. I’m working with an array representation of “golden numbers”, where [a,b] encodes a+b*phi.

https://beta.observablehq.com/d/9ee20664107a443d

The notebook also has an attempt at a “vector” control, using three of the number sliders, but I haven’t been able to get it to update the value of the cell. I’m no expert on inputs, so perhaps I just don’t know the right event to handle. Can you offer any tips?


#2

Try this (and click the Merge button to incorporate it into your notebook!):

The key part is:

element.oninput = () => element.value = [ x.value, y.value, z.value ];
element.oninput();

The input events bubble, so if you intercept them at the top-level element, you can define the value that gets exported to the view.


#3

Awesome! Thank you, Mike. My first merge… great feature!