Genie Discord forum
![Author Avatar](https://cdn.discordapp.com/avatars/679661866166910986/f3ed85f7a3e27b92039307687c03613a.png?size=512)
Consider the following MWE:
using GenieFramework
@genietools
@app begin
@in slider_one = 1
@in slider_two = 11
@onchange slider_one println(slider_one)
@onchange slider_two println(slider_two)
@out tabgroup = "one"
@out tabpanelgroup = "one"
end
function ui()
[
tabgroup(:tabgroup,
[
tab(name="one", label="Tab one"),
tab(name="two", label="Tab two")
])
tabpanelgroup(:tabpanelgroup,
[
tabpanel("Inside tab one", name = "one", [slider(1:10, :slider_one, markers=true, labelalways=true)])
tabpanel("Inside tab two", name = "two", [slider(11:20, :slider_two, markers=true, labelalways=true)])
])
]
end
@page("/", ui)
Server.up()
How can we have the tab panel switch to panel "two"
so that :slider_two
can display and the user interact with it?
![](https://cdn.discordapp.com/attachments/1156313558645231728/1156313558808793178/screenshot_2023-09-26_213650.jpg?ex=65381ceb&is=6525a7eb&hm=11abe2b333d64839d0349a0d316f01cbadd2a295afa203599860539f83da5c75&)
![Author Avatar](https://cdn.discordapp.com/avatars/679661866166910986/f3ed85f7a3e27b92039307687c03613a.png?size=512)
To be clear, when I press (with the mouse) on TAB TWO
the content of the panel below does not change.
![Author Avatar](https://cdn.discordapp.com/avatars/743412727464067154/bc30abeb49653e9978c0f7c90f4486a8.png?size=512)
you need to use the same reactive variable for both tabgroup and tabpanel. Setting both to
See this example, where the v-model parameter is the reactive variable https://learn.genieframework.com/examples/reactive-ui/components/tabs