Solara•9mo ago

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•9mo 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•9mo 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?

Alonso SilvaOP•9mo ago

Yes, I want to reproduce the slider+counter linked example from anywidget. Thank you very much!

Gaming

Programming

Extract the value from an ipywidget