Dash range slider which able to interact with input field that display range slider value

Dash Python
3

@Eduardo was correct, but with today’s announcement of the latest release it is now possible to have some circular callbacks which enables you to make synchronized components :confetti_ball:

Be sure to upgrade to dash 1.19.0, then this example will work:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    [
        html.H4("Synchronized Components"),
        dcc.RangeSlider(
            id="slider",
            min=0,
            max=20,
            marks={i: str(i) for i in range(21)},
            value=[5, 15],
        ),
        "Start Value:",
        dcc.Input(id="start_value", type="number", min=0, max=20, value=5),
        "End Value:",
        dcc.Input(id="end_value", type="number", min=0, max=20, value=15),
    ]
)


@app.callback(
    Output("start_value", "value"),
    Output("end_value", "value"),
    Output("slider", "value"),
    Input("start_value", "value"),
    Input("end_value", "value"),
    Input("slider", "value"),
)
def callback(start, end, slider):
    ctx = dash.callback_context
    trigger_id = ctx.triggered[0]["prop_id"].split(".")[0]

    start_value = start if trigger_id == "start_value" else slider[0]
    end_value = end if trigger_id == "end_value" else slider[1]
    slider_value = slider if trigger_id == "slider" else [start_value, end_value]

    return start_value, end_value, slider_value


if __name__ == "__main__":
     app.run_server(debug=True)

range_slider_sync

2 Likes