Update non-active slider handle

Dash Python
1

Hello all,

I would like to have a live update of a non-active slider handle.
So the handle of a slider should move based on the input from another slider.

In the example below, slider 2 should move together with slider 1, but slider 2 should also be able to move independently of slider 1

import json

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

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Slider(
        id='slider',
        min=0,
        max=20,
        step=0.5,
        value=10,
    ),
    dcc.Slider(
        id='slider2',
        min=0,
        max=20,
        step=0.5,
        value=10,
    ),    
    html.Div(id='container')
])


@app.callback(Output('container', 'children'),
              [Input('slider','value'),
               Input('slider2','value')])
               
def display(slider,slider2):
    ctx = dash.callback_context

    if not ctx.triggered:
        value_id = 'No value yet'
        slider_id = 'No value yet'
    else:
        value_id = ctx.triggered[0]['value']
        slider_id = ctx.triggered[0]['prop_id'].split(".")[0]
        


    return html.Div([
        html.Table([
            html.Tr([html.Th('Slider 1'),
                     html.Th('Slider 2'),
                     html.Th('Last updated value'),                   
                     html.Th('Last updated slider')]),
            html.Tr([html.Td(slider or 0),
                     html.Td(slider2 or 0),
                     html.Td(value_id),                    
                     html.Td(slider_id)])
        ])
    ])


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

Just add another callback to handle the case where the input change of slider triggers an update for slider2. This cannot be done in your original callback since components cannot be in both Input and Output.

@app.callback(Output('slider2', 'value'),
              [Input('slider','value')])
def update_slider(slider):
    ctx = dash.callback_context

    if not ctx.triggered:
        return no_update
    else:
        return slider

Also, add the following to your import section for no_update:

from dash.dash import no_update
1 Like