Synchronizing two inputs

Dash Python
1

I have a Slider and an Input component. I want them to be synchronized so that when I change the slider value the input value should be updated and the other way around. Is that possible?

1 Like
2

I’m actually a little stumped on this question, there are 2 problems:

  1. An input can’t be an output
  2. And in general circular input-output dependencies aren’t allowed (and there is no error to tell you this, you just get “Error loading layout”)

@Philippe Any suggestions on how someone could do this? I definitely foresee situations where this could be useful.

In an ideal world I believe it should be possible to enable or tweak this code in to working:

import dash
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Input(
        id='input-component',
        min=0,
        max=9,
        type='number',
        value=5
    ),
    dcc.Slider(
        id='slider-component',
        min=0,
        max=9,
        marks={x: x for x in range(10)},
        value=5
    )
])


@app.callback(
    output=[dash.dependencies.Output('input-component', 'value'),
            dash.dependencies.Output('slider-component', 'value')],
    inputs=[dash.dependencies.Input('input-component', 'value'),
            dash.dependencies.Input('slider-component', 'value')]
)
def sync_input_and_slider(input_value, slider_value):
    if input_value == slider_value:
        raise dash.exceptions.PreventUpdate

    if dash.callback_context.triggered[0] == 'input-component.value':
        return dash.no_update, input_value
    else:
        return slider_value, dash.no_update


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

But this raises dash.exceptions.SameInputOutputException which can’t be suppressed as best as I can tell.

3

See @chriddyp’s response in another thread: Synchronize components bidirectionally

Basically, this is a current limitation of Dash.

1 Like