Storing several Slider(s) to variables lead to very bad reactiveness

[scls19fr]

Hello,

Following issue #299 I changed my Pluto.jl notebook to store sliders into 4 variables.

See https://gist.github.com/scls19fr/1486d2732db61d81d4b0021ca5e79481

• am_modulation.jl without storing sliders into variable
• am_modulation_v2.jl storing each slider into variables

v2 is much less reactive and nearly unusable

With v2 you always need to release left button each time you are changing value.

A fix about this will be great because the v2 code writing is much more convenient (less cells)

Kind regards

[fonsp]

Can you record a video that demonstrates the problem?

[fonsp]

Ah I see, you case is:

bond = @bind x Slider(1:10)

md"""
Bond: $bond

Value: $x
"""

This is not supported. It's not possible to place the bond (the result of @bind x Slider(1:10)) and the bound value (x) in the same cell.

This is because moving the slider changes x, which causes cells that reference x to re-run. Re-running the md""" cell will show the new value of x, but also re-render the bond, so a new slider is created. The new slider does not have mouse focus so you can't continue sliding.

A workaround for displaying a bond and a bound value in the same cell is to use one of Pluto's built-in combined displays. The main system is in PlutoUI.ExperimentalLayout (hbox, grid, etc). You can also use a DataFrame and put the bond and bound variable in different cells.

[scls19fr]

I posted for comparison a Marimo notebook with exactly same features

https://gist.github.com/scls19fr/1486d2732db61d81d4b0021ca5e79481#file-am_modulation-py

but that's life ... if I want to use Pluto.jl... I know now that I need to have more cells.

[ederag]

Late to the party (just saw this issue in the release notes), but the show_value = true argument
might be of interest here, when the slider should be in the same cell as its value.

Of course the centering is a bit off, but that would be another issue.

[fonsp]

And like I mentioned, you can use ExperimentalLayout to but bonds and values together. Here is a silly example:

Schermopname.2024-04-24.om.11.49.22.mov

# ╔═╡ b4c48706-021f-11ef-1413-059aae52cfc4
using PlutoUI

# ╔═╡ d3d667e4-4e98-44d0-b1f0-cde287afe969
bond = @bind x Slider(1:100);

# ╔═╡ aed4e404-2ca3-4db2-9ac5-d9fd65dbdd98
PlutoUI.ExperimentalLayout.grid([
	bond Text("x² = $(x*x)")
	x    bond
])