Problem with Circular Callbacks - Slider changes Input, and Input changes Slider

Dash Python
1

Hi!
I have a dcc.Slider and a dcc.Input. When I drag the pointer of the Slider I want to change the value of my Input. Likewise, when I write a number in my Input, I want the Slider to automatically change its value. Is there a workaround to the circular error?

@app.callback(
    [Output('durationInput', 'value')],
    [Input('durationSlider', "value")]
)
def input_update(value):
    return [value]

@app.callback(
    [Output('durationSlider', 'value')],
    [Input('durationInput', "value")]
)
def slider_update(value):
    return [value]

Here is an image of what is expected:
image

2 Likes
2

Hi @AntMorais, as of today, there are no “clean” ways to handle circular dependencies. The only way to do that right now is to return both components in the callback:

@app.callback(
    [Output('wrapper_div', 'children')],
    [Input('durationInput', 'value'), Input('durationSlider', "value")]
)
def input_update(valueInput, valueSlider):
    trigger_id = dash.callback_context.triggered[0]["prop_id"]
    if trigger_id == "durationInput.value":
        return [
            # Fill the dots with whatever arguments are in your layout
            dcc.Slider(id="durationSlider", value=valueInput, ...),
            dcc.Input(id="durationInput", value=valueInput, ...),
        ]
    if trigger_id == "durationSlider.value":
        return [
            # Fill the dots with whatever arguments are in your layout
            dcc.Slider(id="durationSlider", value=valueSlider, ...),
            dcc.Input(id="durationInput", value=valueSlider, ...),
        ]
    return dash.no_update
2 Likes
3

Works like a charm! Thanks!