How to create multiple sliders next to each other and add a button

New To Observable
1

I want to create 4 horizontal sliders which control the data generation settings (x and y, mean and var) and one button “Generate data” (i.e. a submit button). There are two challenges:

  1. The sliders should not be all below each other, to save space. At least two should horizontally be next to each other.
  2. The data shall not be generated before the user clicks the button. Something like here, but one button for multiple sliders.

Is this difficult to implement on Observable?

2

Welcome to the forum frederikho!

For #1, see this notebook @tophtucker recently shared: Horizontal inputs / Toph Tucker | Observable

For #2: You can snapshot the current value of of the sliders using a function inside Inputs.button like this. This is not great because each time you update the sliders, the button also reruns since it is now dependent on the slider cells and the result resets to the initial value. Somebody else probably has a better solution for this one.

2 Likes
3

For #2 you may want to check out this helper:

3 Likes
4

Exactly what I asked for, thanks a lot!
A good alternative are vertical sliders, particularly as I noticed that I need even more sliders (around 10).

1 Like
5

Fantastic! Great to see these things are already developed.

1 Like