Latest changed slider value

Dash Python
1

Hi all,

Dash looks great! I need to show the last changed slider value as a single output value “A”.
If slider 1 changes, last changed value “A” is value of slider 1.
If slider 2 changes, last changed value “A” is value of slider 2.
Any help is welcome :slight_smile:

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Slider(
id=‘slider1’,
min=0,
max=20,
step=0.5,
value=10,
),
html.Div(id=‘output1’),
dcc.Slider(
id=‘slider2’,
min=0,
max=20,
step=0.5,
value=10,
),
html.Div(id=‘output2’),
html.Div(id=‘output3’)

])

@app.callback(
dash.dependencies.Output(‘output1’, ‘children’),
[dash.dependencies.Input(‘slider1’, ‘value’)])
def update_output(value):
return ‘You have selected “{}”’.format(value)

@app.callback(
dash.dependencies.Output(‘output2’, ‘children’),
[dash.dependencies.Input(‘slider2’, ‘value’)])
def update_output(value):
return ‘You have selected “{}”’.format(value)

@app.callback(
dash.dependencies.Output(‘output3’, ‘children’),
[dash.dependencies.Input(‘slider1’, ‘value’),
dash.dependencies.Input(‘slider2’, ‘value’)])
def update_output(slider1,slider2):
return ‘Last updated value is “{}”’.format(slider1*slider2)

if name == ‘main’:
app.run_server(debug=True)

2

In your 3rd callback (where you pass both inputs), you need to determine which slider was selected. Check out https://dash.plot.ly/faqs and the question How do I determine whichInputhas changed?

3

Thank you flyingcujo, replacing button by slider in that faqs question did the trick.

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)
1 Like