# Slider Positioning in Interact.jl

**URL:** <https://discourse.julialang.org/t/slider-positioning-in-interact-jl/5001>\
**Category:** General Usage\
**Created:** [July 21, 2017, 4:41pm UTC](https://discourse.julialang.org/t/slider-positioning-in-interact-jl/5001 "2017-07-21T16:41:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rand5](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rand5/32/867_2.png) [@rand5](https://discourse.julialang.org/u/rand5)\
**Post date:** [July 21, 2017, 4:41pm UTC](https://discourse.julialang.org/t/slider-positioning-in-interact-jl/5001/1 "2017-07-21T16:41:47Z")

</div>

I am using Interact.jl to modify an image which is then displayed using Plots.jl. Multiple slider bars are required to do the manipulation. My question is, is there a way to arrange the slider bars in a jupyter cell to avoid taking up so much vertical space? For example, arrange them in a 5x2 grid so that all the sliders and the output image can be seen in the same field of view.

---

<div class="post-metadata">

**Author:** ![djsegal](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/djsegal/32/13752_2.png) [@djsegal](https://discourse.julialang.org/u/djsegal)\
**Post date:** [July 21, 2017, 7:17pm UTC](https://discourse.julialang.org/t/slider-positioning-in-interact-jl/5001/2 "2017-07-21T19:17:40Z")

</div>

try adding this code to your notebook:

`display("text/html", "<style>.cell .widget-area .widget-subarea { flex-direction: row; flex-wrap: wrap; }</style>")`

---

<div class="post-metadata">

**Author:** ![rand5](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rand5/32/867_2.png) [@rand5](https://discourse.julialang.org/u/rand5)\
**Post date:** [July 21, 2017, 7:57pm UTC](https://discourse.julialang.org/t/slider-positioning-in-interact-jl/5001/3 "2017-07-21T19:57:28Z")

</div>

Perfect!  
Thanks @djsegal

---

<div class="post-metadata">

**Author:** ![rand5](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/rand5/32/867_2.png) [@rand5](https://discourse.julialang.org/u/rand5)\
**Post date:** [December 4, 2017, 7:04pm UTC](https://discourse.julialang.org/t/slider-positioning-in-interact-jl/5001/4 "2017-12-04T19:04:20Z")

</div>

I just upgraded to v0.6.1 and this solution no longer seems to work. Thoughts?

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 6, 2018, 9:08am UTC](https://discourse.julialang.org/t/slider-positioning-in-interact-jl/5001/5 "2018-03-06T09:08:12Z")

</div>

Hi,  
just had the same kind of problem and found:

> s1 = slider(1:1:10, value = 3, label = “Slider 1”)  
> s2 = slider(1:10:100, value = 60, label = “Slider 2”)  
> hbox(s1,s2)

vbox should work accordingly (but doesn’t) 😉  
instead better do something like

> map(display,[hbox(s1,s2,s3),hbox(s4,s5,s6),hbox(s7,s8)])