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

**URL:** <https://talk.observablehq.com/t/how-to-create-multiple-sliders-next-to-each-other-and-add-a-button/7573>\
**Category:** Help\
**Created:** [January 29, 2023, 10:25pm UTC](https://talk.observablehq.com/t/how-to-create-multiple-sliders-next-to-each-other-and-add-a-button/7573 "2023-01-29T22:25:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![frederikho](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/frederikho/32/7389_2.png) [@frederikho](https://talk.observablehq.com/u/frederikho)\
**Post date:** [January 29, 2023, 10:25pm UTC](https://talk.observablehq.com/t/how-to-create-multiple-sliders-next-to-each-other-and-add-a-button/7573/1 "2023-01-29T22:25:50Z")

</div>

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](https://observablehq.com/@andreasplesch/inputsap), but one button for multiple sliders.

Is this difficult to implement on Observable?

---

<div class="post-metadata">

**Author:** ![Ananya](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@Ananya](https://talk.observablehq.com/u/Ananya)\
**Post date:** [January 30, 2023, 2:28am UTC](https://talk.observablehq.com/t/how-to-create-multiple-sliders-next-to-each-other-and-add-a-button/7573/2 "2023-01-30T02:28:03Z")

</div>

Welcome to the forum frederikho!

For #1, see this notebook @tophtucker recently shared: [Horizontal inputs / Toph Tucker | Observable](https://observablehq.com/@tophtucker/horizontal-inputs)

For #2: You can snapshot the current value of of the sliders using a function inside Inputs.button like [this](https://observablehq.com/d/195a62276ad04a06). 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.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 30, 2023, 2:57am UTC](https://talk.observablehq.com/t/how-to-create-multiple-sliders-next-to-each-other-and-add-a-button/7573/3 "2023-01-30T02:57:32Z")

</div>

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

> **[Submittable Input Forms](https://observablehq.com/@mootari/inputs-submit)**
>
> Observable's immediate feedback for input changes is great, but sometimes you want to confirm changes explicitely before updating dependent cells. The Inputs library allows explicit submission only for some widgets, and its helper \`Inputs.form()\` is...

---

<div class="post-metadata">

**Author:** ![frederikho](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/frederikho/32/7389_2.png) [@frederikho](https://talk.observablehq.com/u/frederikho)\
**Post date:** [January 30, 2023, 1:52pm UTC](https://talk.observablehq.com/t/how-to-create-multiple-sliders-next-to-each-other-and-add-a-button/7573/4 "2023-01-30T13:52:35Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![frederikho](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/frederikho/32/7389_2.png) [@frederikho](https://talk.observablehq.com/u/frederikho)\
**Post date:** [January 30, 2023, 1:54pm UTC](https://talk.observablehq.com/t/how-to-create-multiple-sliders-next-to-each-other-and-add-a-button/7573/5 "2023-01-30T13:54:25Z")

</div>

Fantastic! Great to see these things are already developed.