Haleshot•6mo ago

Been wanting to display two different

Been wanting to display two different sets of sliders with different options (they are stacked together horizontally) according to the radio button choices/checkbox choices/switch toggle (trying all sorts of "choice" related UI elements) that the user selects. The sliders should be updated accordingly. How do I achieve this? For example, I have made 3 sliders. I want to use two radio buttons as choices for the user to choose from; this will in turn change the sliders (there exists one common slider in both options).

frequency = mo.ui.slider(start=1, stop=10, step=1, value=5, label="Frequency")
amplitude = mo.ui.slider(start=1, stop=10, step=1, value=5, label="Amplitude")
time_period = mo.ui.slider(start=1, stop=10, step=1, value=5, label="Time period")

frequency = mo.ui.slider(start=1, stop=10, step=1, value=5, label="Frequency")
amplitude = mo.ui.slider(start=1, stop=10, step=1, value=5, label="Amplitude")
time_period = mo.ui.slider(start=1, stop=10, step=1, value=5, label="Time period")

# will be used to track which option the user has selected (time period or frequency)
get_slider_tracker, set_slider_tracker = mo.state(set())

choice = mo.ui.switch(
    label="Use Time Period instead",
    on_change=lambda _: set_slider_tracker(True)
)

remove_choice = mo.ui.switch(
    label="Remove Frequency instead",
    on_change=lambda _: set_slider_tracker(False),
)

slider_options = [
    frequency,
    amplitude
]
another_slider_options = [
    time_period,
    amplitude
]

# will be used to track which option the user has selected (time period or frequency)
get_slider_tracker, set_slider_tracker = mo.state(set())

choice = mo.ui.switch(
    label="Use Time Period instead",
    on_change=lambda _: set_slider_tracker(True)
)

remove_choice = mo.ui.switch(
    label="Remove Frequency instead",
    on_change=lambda _: set_slider_tracker(False),
)

slider_options = [
    frequency,
    amplitude
]
another_slider_options = [
    time_period,
    amplitude
]

mo.hstack(
    
    [
        [choice],

        # Show radios
        (
            mo.hstack(
                    slider_options, justify="space-around")
            if not get_slider_tracker()
            else mo.hstack(another_slider_options, justify="space-around")
        )
    ]
)

mo.hstack(
    
    [
        [choice],

        # Show radios
        (
            mo.hstack(
                    slider_options, justify="space-around")
            if not get_slider_tracker()
            else mo.hstack(another_slider_options, justify="space-around")
        )
    ]
)

3 Replies

HaleshotOP•6mo ago

The issue that I'm facing is... on clicking on the switch toggle, the slider gets updated (to the two sliders I want visible); but using and interacting with the updated slider makes the value go back to the first slider which was there.

HaleshotOP•6mo ago

Trying without needing mo.ui.state with just the value attribute of the UI elements... maybe I'm just missing something completely "easy" 🙈 Ughh; was an easy fix. Didn't have to use mo.state. Closing the thread now.