I have a (seemingly simple) use case where i need two components to be synchronized bidirectionally as they represent the same input and are both editable. As simple example, consider a slider and text input field. If i move the slider, the text input field should update. If i edit the text field, the slider should move. The following code illustrates the point,
import dash import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Output, Input app = dash.Dash(__name__) app.layout = html.Div(children=[dcc.Slider(id="slider", min=0, max=10, value=5), dcc.Input(id="input", value=5)]) app.callback(Output("slider", "value"), [Input("input", "value")])(lambda x: x) # update slider to match input app.callback(Output("input", "value"), [Input("slider", "value")])(lambda x: x) # update input to match slider if __name__ == '__main__': app.run_server(debug=True)
but it does not work since it contains a cyclic dependency. My question is now, if there is any (simple) way to achieve the desired behaviour?