Plotly Dash: Hide/show slider component by updating different dropdown component

Question

I have partially working solution to hide/show Slider component by updating Dropdown component. The code does what I want it to but I'm getting an error on the webpage:

Invalid prop for this component: Property "style" was used with component ID: "slider" in one of the Output items of a callback. This ID is assigned to a dash_core_components.Slider component in the layout, which does not support this property. This ID was used in the callback(s) for Output(s):slider.style

Is it possible to hide Slider component using other property? Thank you.

app.layout = html.Div([
    dcc.Graph(
        id='CZmap'   
    ),
    html.Label('Dropdown'),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Kraje', 'value': 'Kraje'},
            {'label': 'Obce', 'value': 'Obce'}
        ],
        value='Obce'
    ),
     # Create Div to place a conditionally visible element inside
    html.Div([
        # Create element to hide/show, in this case an 'Input Component'
        dcc.Slider
            (
            id='slider',
            min=1,
            max=4,
            step=1,
            value=1,
            marks={str(i): str(i) for i in range(1,5)}
            )
    ], style= {'display': 'block'} # <-- This is the line that will be changed by the dropdown callback
    )
])

@app.callback(
   Output(component_id='slider', component_property='style'),
   [Input(component_id='dropdown', component_property='value')])
def show_hide_element(visibility_state):
    if visibility_state == 'Kraje':
        return {'display': 'block'}
    if visibility_state == 'Obce':
        return {'display': 'none'}

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


  [1]: https://stackoverflow.com/questions/50213761/changing-visibility-of-a-dash-component-by-updating-other-component

score 2 · Accepted Answer · answered Jul 08 '20 at 11:41

You could assign an id to the slider's container, and then switch on and off the visibility of the container as in the example below.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([

    dcc.Graph(id='CZmap'),

    html.Label('Dropdown'),

    dcc.Dropdown(id='dropdown',
                 options=[{'label': 'Kraje', 'value': 'Kraje'},
                          {'label': 'Obce', 'value': 'Obce'}],
                 value='Obce'),

    # Create Div to place a conditionally visible element inside
    html.Div(id='slider-container', children=[

        # Create element to hide/show, in this case a slider
        dcc.Slider(id='slider',
                   min=1,
                   max=4,
                   step=1,
                   value=1,
                   marks={str(i): str(i) for i in range(1,5)})

    ], style= {'display': 'block'}) # <-- This is the line that will be changed by the dropdown callback

])

@app.callback(
   Output(component_id='slider-container', component_property='style'),
   [Input(component_id='dropdown', component_property='value')])
def show_hide_element(visibility_state):
    if visibility_state == 'Kraje':
        return {'display': 'block'}
    if visibility_state == 'Obce':
        return {'display': 'none'}

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

score 1 · Answer 2 · answered Apr 20 '21 at 21:08

Simply we can set the hidden property of a component directly:

@app.callback(
    Output(component_id='slider-container', component_property='hidden'),
    [Input(component_id='dropdown', component_property='value')])
def show_hide_element(value):
    if visibility_state == 'Kraje':
        return True  # This will make hidden property true
    if visibility_state == 'Obce':
        return False  # This will make hidden property false

With this solution you don't have to edit any styles but directly the component's "hidden" property which might be more elegant.

Plotly Dash: Hide/show slider component by updating different dropdown component

2 Answers2