Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Display slider component only if condition is met

Hello everyone, I’m wondering how to display slider component only if value ‘unemployment’ is selected from dropdown menu? Thank you for your answer and time.

import json
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
from urllib.request import urlopen
from dash.dependencies import Input, Output
import plotly.graph_objects as go

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

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

df = pd.read_csv("https://raw.githubusercontent.com/MichalLeh/CZ-map/master/CZ.csv",
                   dtype={"district": str})

with urlopen('https://raw.githubusercontent.com/MichalLeh/CZ-map/master/CZ-district.json') as response:
    geojson = json.load(response)

app.layout = html.Div([
    dcc.Graph(
        id='CZmap'    
    ),
    html.Label('Dropdown'),
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'Unemployment', 'value': 'unemployment'},
            {'label': 'Population', 'value': 'population'}
        ],
        value='population'
    ),
    html.Label('Slider'),
    dcc.Slider(
        id='slider',
        min=1,
        max=4,
        step=1,
        value=1,
        marks={str(i): str(i) for i in range(1,5)}
    )
])  

@app.callback(
    Output(component_id='CZmap', component_property='figure'),
    [Input(component_id='dropdown', component_property='value'),
    Input(component_id='slider', component_property='value')])
def update_map(dropVar, slideVar):
    if dropVar == 'population':
        selectCol = 'population'
    elif dropVar == 'Unemp':
        selectCol = "Unemp_" + str(slideVar)

    fig = px.choropleth_mapbox(df, geojson=geojson, color=selectCol,
                        locations="district", featureidkey="properties.district",
                        center={"lat": 50.5517, "lon": 15.7073},
                        mapbox_style="carto-positron",width=1200, height=600, zoom=5)
    fig.update_layout(margin={"r":60,"t":50,"l":60,"b":50})

    return fig

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