Link attributes of two widgets

📊 Plotly Python
1

Hi there,
I’m a new user of Dash.Plotly and am struggling with trying to link the values of the attributes of two widgets.

I have a dropdown menu that I use to select a variable (i.e., column) from a dataframe. I also have a RangeSlider that I would like to use to change the ranges presented in a plot. Because each variable has a different range from the others, I’d like the “min”, “max” and “value” attributes of RangeSlider to be updated automatically when I select a given variable.
But I do not know how to do this.

Here’s a snipped of my code:

import dash
import dash_html_components as html
import dash_core_components as dcc
import numpy as np
import pandas as pd

lst1 = list(np.asarray([11, 22, 33, 44, 55, 66, 77])/1000)
df_var = pd.DataFrame(lst1, columns=[‘X’])
df_var[‘Y’] = [11, 22, 33, 44, 55, 66, 77]

vars_available = [‘X’, ‘Y’]
bgc_vars = [{‘label’: i, ‘value’: i} for i in vars_available]

app = dash.Dash()
app.layout = html.Div(id=‘parent’, children=[

dcc.Dropdown(id='dropdown',
            options=bgc_vars,
            value=list(bgc_vars[0].items())[0][1]
            ),

dcc.RangeSlider(id='range_slider',
                   min=0,  ## would like to change this based on the Dropdown.value
                   max=100, ## would like to change this based on the Dropdown.value
                  step=0.1, ## would like to change this based on the Dropdown.value
                  value=[5, 15], ## would like to change this based on the Dropdown.value
                 updatemode='drag',
                 allowCross=False,
                  tooltip={"placement": "bottom", "always_visible": True}
                   ),
], style={'width': '20%'}, title='Variable range' )

if _name_ == ‘_main_’:
app.run_server()

Any help will be greatly appreciated.
Many thanks in advance.

2

Hello @grg,

You can do that, you need to utilize a callback from the dropdown value to go to the RangeSlider min, max, step and value.

Here is an example:

import dash
from dash import html, dcc, Input, Output
import numpy as np
import pandas as pd

lst1 = list(np.asarray([11, 22, 33, 44, 55, 66, 77])/1000)
df_var = pd.DataFrame(lst1, columns=["X"])
df_var["Y"] = [11, 22, 33, 44, 55, 66, 77]

vars_available = ["X", "Y"]
bgc_vars = [{"label": i, "value": i} for i in vars_available]

app = dash.Dash()
app.layout = html.Div(id="parent", children=[

dcc.Dropdown(id='dropdown',
            options=bgc_vars,
            value=list(bgc_vars[0].items())[0][1]
            ),

dcc.RangeSlider(id='range_slider',
                   min=0,  ## would like to change this based on the Dropdown.value
                   max=100, ## would like to change this based on the Dropdown.value
                  step=0.1, ## would like to change this based on the Dropdown.value
                  value=[5, 15], ## would like to change this based on the Dropdown.value
                 updatemode='drag',
                 allowCross=False,
                  tooltip={"placement": "bottom", "always_visible": True}
                   ),
], style={'width': '20%'}, title='Variable range')

@app.callback(
    Output('range_slider','min'),
    Output('range_slider','max'),
    Output('range_slider','step'),
    Output('range_slider','value'),
    Input('dropdown','value')
)
def updateSlider(selected):
    min = df_var[selected].min()
    max = df_var[selected].max()
    step = (max - min)/10
    qrt = (max - min)/2.5
    val = [(min + qrt),(max - qrt)]
    return min, max, step, val

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