Extract the value from an ipywidget

Hi all! I want to extract the value from an ipywidget but the values between the Solara app and the ipywidget do not coincide (I need to keep pressing the slider for a long time before they both agree). Here is the code I have:
import solara
import ipywidgets as widgets

aux = solara.reactive(0)
@solara.component
def Page():
slider = widgets.IntSlider()
output = widgets.Output()
display(slider, output)
def on_value_change(change):
with output:
aux.value = change["new"]
slider.observe(on_value_change, names='value')
solara.Markdown(f"{aux.value}")
import solara
import ipywidgets as widgets

aux = solara.reactive(0)
@solara.component
def Page():
slider = widgets.IntSlider()
output = widgets.Output()
display(slider, output)
def on_value_change(change):
with output:
aux.value = change["new"]
slider.observe(on_value_change, names='value')
solara.Markdown(f"{aux.value}")
Or you can check it here: https://app.py.cafe/snippet/solara/v1?c=H4sIAEmrJ2YAA11RTUvEMBD9KyGX7UIpngsLXjx4EAXBi5FltpnuBtNJTNKtZfG_O21TKc4lycub9-bjJhunUdbSdN6FJKKzEEBRfho_DkafMUUBUeSrIkXQf4tDZlcBoUnmisXdXtF9BhvHEoSUFGlsxQucsdjXigRHtEZjYIGsWD1Sep2xghUmhuuT79OG8TwD67c20VsYi0WozPT1k-0cHa9gezw2FyB2Xo7Vf4rBpEvO26BTcG_VnMz2S967koSDkh_b8it3ihi4639epSDoMB52M7jLReWpPEH41G6golXy9mf0oyTTZCkDfvUmYMdji7yUGUujnxa0CPAbvH8zOMi6BRuxlKhNeiA4WWalwGK_NO9QjNQBAAA I know I could do it with the solara.SliderInt() component or through an ipywidget application but I want to see if we can do it without those solutions...
3 Replies
MaartenBreddels
MaartenBreddels2mo ago
Hi Alonso, Nice to see you using pycafe for this. This makes it so much easier to debug it. I think you might want to take a look at https://solara.dev/documentation/advanced/howto/ipywidget-libraries Or possibly https://maartenbreddels.medium.com/advance-your-ipywidget-app-development-with-reacton-6734a5607d69 if you want to go more in depth.
Using various ipywidgets libraries within a Solara application
Solara can work with virtually any ipywidget library, and enables powerful interactivity with libraries like ipyleaflet, ipydatagrid, and bqplot.
Medium
Advance your ipywidget app development with Reacton
A pure Python port of React for faster development
MaartenBreddels
MaartenBreddels2mo ago
A working example for you would be:
import solara
import ipywidgets as widgets

aux = solara.reactive(0)

@solara.component
def Page():
def on_value_change(value):
aux.value = value
widgets.IntSlider.element(on_value=on_value_change)
widgets.Output.element()
solara.Markdown(f"{aux.value}")
import solara
import ipywidgets as widgets

aux = solara.reactive(0)

@solara.component
def Page():
def on_value_change(value):
aux.value = value
widgets.IntSlider.element(on_value=on_value_change)
widgets.Output.element()
solara.Markdown(f"{aux.value}")
Run and edit this code snippet at PyCafe My guess is that you are using anywidget?
alonsosilva
alonsosilva2mo ago
Yes, I want to reproduce the slider+counter linked example from anywidget. Thank you very much!