Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Easy way to have multiple outputs in a callback

Hi,

I have a use case where selecting a dropdown item will change multiple values in a slider including value, min, max, and marks. Do I have to make 4 separate callbacks to change each of these separately, or is there an easy way to change multiple values with one callback?

2 Likes

Hi! you can create html.Div and with callback update its children property which would return dcc.Slider that was bild by your dropdown logic. if you want your slider can be used in other callbacks then you need to set ‘app.config.supress_callback_exceptions = True’ as you will create slider dynamically. here it is example what im talking about

app.config.supress_callback_exceptions = True
...
html.Div(id='slider-keeper', style={'width': '100%'}),
html.P(id='slider_info')
...

@app.callback(
dash.dependencies.Output('slider-keeper','children'),
[dash.dependencies.Input('your_drop','value')
])

def update_slider_example(some_input):
    
     #your logic there
     if some_input==<your condition>:
        max_value=3
        min_value=0
        value=2
        marks=[0,1,2,3]
      else:
         max_value=10
         min_value=0
         value=5
         marks=[0,1,2,3,4,5,6,7,8,9,10]
     return dcc.Slider(
                       id='slider',
                       min=min_value,
                       max=max_value,
                       value=value,
                       marks=marks
                     )

@app.callback(
dash.dependencies.Output('slider_info','children'),
[dash.dependencies.Input('slider','value')
])

def update_slider_info(slider_value):
    return 'you have select {}'.format(slider_value)
3 Likes

Hi Roman, thanks for the response. I tried to implement your example, but unfortunately i got an “Error loading dependancies” error. When I tried to implement the strategy in my full code, everything loded, except the slider. It was as if it didnt exist. Here is the full code for the example you posted w/ the dependencies error:

# plotting imports
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import plotly.graph_objs as go

app = dash.Dash()
app.config.supress_callback_exceptions = True

e1 = html.Div(id='slider-keeper', style={'width': '100%'}),
e2 = html.P(id='slider_info')

dropdown = dcc.Dropdown(
    id='your_drop',
    options=[{'label': i, 'value': i} for i in range(3)],
)

app.layout = html.Div([dropdown, e1, e2], style={'width': '100%'})



@app.callback(
    Output('slider-keeper', 'children'),
    [Input('your_drop', 'value')
     ])
def update_slider_example(some_input):
    # your logic there
    if some_input == 3:
        max_value = 3
        min_value = 0
        value = 2
        marks = [0, 1, 2, 3]
    else:
        max_value = 10
        min_value = 0
        value = 5
        marks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    return dcc.Slider(
        id='slider',
        min=min_value,
        max=max_value,
        value=value,
        marks=marks
    )


@app.callback(
    Output('slider_info', 'children'),
    [Input('slider', 'value')])
def update_slider_info(slider_value):
    return 'you have select {}'.format(slider_value)

if __name__ == '__main__':
    app.run_server()
1 Like

because comma at the end of this is error
e1 = html.Div(id=‘slider-keeper’, style={‘width’: ‘100%’}),
i tried without that and your code worked.
but second part
if some_input == 3:
you cant have 3 in dropdown with values for i in range(3)
try some_input==2 or range(4) one of those

1 Like

This was super helpful!

I didnt realize that html.Div children could be callback outputs. I suggest this is more strongly emphasized in the dash user guides

2 Likes