Is it possible include multiple components within the same chained dash callback. Below, I have two countries within an initial callback. Based on which country is selected, associated cities are shown.
This works fine but I’m aiming to include multiple components based on the initial country callback. There are two sliders for each country that should appear with the associated cities.
Also, can the city items be used as a checklist, instead of radio items?
from dash import Dash, dcc, html, Input, Output, callback
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
all_options = {
'America': ['New York City', 'San Francisco', 'Cincinnati'],
'Canada': ['Montréal', 'Toronto', 'Ottawa']
}
app.layout = html.Div([
dcc.RadioItems(
list(all_options.keys()),
'America',
id='countries-radio',
),
dcc.RadioItems(id='cities-radio'),
html.Label('US Slider 1', style = {'display': 'inline-block'}),
dcc.Slider(0, 10, 2,
value = 10,
id = ''
),
html.Label('US Slider 2', style = {'display': 'inline-block'}),
dcc.Slider(0, 1, 0.2,
value = 1,
id = ''
),
html.Label('Can Slider 1', style = {'display': 'inline-block'}),
dcc.Slider(0, 10, 2,
value = 0,
id = ''
),
html.Label('Can Slider 2', style = {'display': 'inline-block'}),
dcc.Slider(0, 1, 0.2,
value = 0,
id = ''
),
html.Div(id='display-selected-values')
])
@callback(
Output('cities-radio', 'options'),
Input('countries-radio', 'value'))
def set_cities_options(selected_country):
return [{'label': i, 'value': i} for i in all_options[selected_country]]
@callback(
Output('cities-radio', 'value'),
Input('cities-radio', 'options'))
def set_cities_value(available_options):
return available_options[0]['value']
if __name__ == '__main__':
app.run_server(debug = True)