I want to dinamically change the type of selection, but it doesn't work

Dash Python
1

Hi everyone!
This is my first comment, so I hope it will be succesfully solved. ( The CHATGPT cannot solve it)

So, I want to change the type of selection (range_slider or dropdown) inside app.layout, but i cannot do it. A toggle before selection determinates that the app.layout contains range_slider or dropdown.
And I want to display the actually statement of chosen selection method. The code:

from dash import Dash, dcc, html, Input, Output, State


# External Stylesheets (for nice default layout)
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

# Initialize the app with suppress_callback_exceptions
app = Dash(__name__, external_stylesheets=external_stylesheets, suppress_callback_exceptions=True)

# Generate the years as a pandas DateRange
years = [2025,2026,2027,2028,2029,2030]

# Create a range slider and dropdown
range_slider = dcc.RangeSlider(
    min=years[0], 
    max=years[-1], 
    step=1, 
    value=[years[0], years[-1]], 
    id="rangeslider_method"
)

dropdown = dcc.Dropdown(
    options=[{'label': str(year), 'value': year} for year in years],
    multi=True,
    value=[years[0]], 
    id="dropdown_method"
)

# A button to toggle between RangeSlider and Dropdown
toggle_button = html.Button("Toggle to RangeSlider", id="toggle_button")

# Define the callback to update content based on button press
@app.callback(
    [Output("selection_content", "children"),
     Output("selected_value", "children")],
    Input("toggle_button", "n_clicks"),
    State("dropdown_method", "value"),  # State for Dropdown value
    State("range_slider_method", "value"),  # State for RangeSlider value
    prevent_initial_call=True
)
def toggle_dropdown(n_clicks, dropdown_value, range_slider_value):
    # Check if the button was clicked an odd number of times (show RangeSlider)
    if n_clicks % 2 == 1:
        # Return RangeSlider, its current value, and show the dropdown
        return range_slider, f"Selected range: {range_slider_value}", {'display': 'none'}
    else:
        # Return Dropdown, its current value, and show the dropdown
        return dropdown, f"Selected years: {dropdown_value}", {'display': 'block'}

# Layout of the app
app.layout = html.Div([
    # The toggle button
    toggle_button,
    
    # Dynamic content container for dropdown or slider
    html.Div(id="selection_content"),
    dropdown,
    range_slider,
    # Display the selected value under the dynamic component
    html.Div(id="selected_value")
])

if __name__ == '__main__':
    app.run(debug=True)

I try with STATIC callback, but it drops this error:
A nonexistent object was used in an Stateof a Dash callback. The id of this object isrange_slider_methodand the property isvalue. The string ids in the current layout are: [toggle_button, selection_content, dropdown_method, range_slider_method, selected_value]

I think I understand thje problem, but I cannot solve it. Please anyone can find an elegent way of solution.

2

Hi @Trix-N !

Welcome to the community!
Your post really makes me not to worry about AI :sweat_smile:
You just have small typo in your ID.

Your callback references range_slider_method but the ID in your slider is rangeslider_method

Best regards,
Christian

3

Ahh, but you return to much. I would recommend using set_props too manipulate the display style!

4

Thanks!
Sorry I misspelled it, but it also goes wrong.

5

No worries about the typo! :smiley:
Yeah like I said, you return too many arguments. You have two Outputs in your callback and return 3 items. So I would expect your error to be something like expected two outputs but provided 3?

6

Finally I made it with dcc-s style display manipulating. It was a great idea @Datenschubse .

Thanks

7

Sure thing!