Dynamically changing multiple component properties for RangeSlider

[alfradchew]

Hi, based on the first example provided in the link:

https://dash.plot.ly/dash-core-components/rangeslider

Is it possible to dynamically change multiple properties of the slider (min, max, step)? I have a dcc.dropdown (with value "A" and "B") which changes the aforementioned properties of the slider based on the value of the dropdown I selected.

For example, if i select option "A" in dcc.dropdown, it will return dcc.RangeSlider(
id='my-range-slider', min=0, max=20, step=0.5, value=[5, 15]
)

If i select option "B" in dcc.dropdown, it will return dcc.RangeSlider(
id='my-range-slider', min=-5, max=10, step=1, value=[-2, 8]
)

Thank you.

[tcados]

Hi Alfrad,

Did you find anything new here? Any work arounds?
I've been dealing with similar issues with sliders but also have not found any solution yet. I found a bug related to dynamically changing slider properties. I posted it in DCC. Heres a link:
plotly/dash-core-components#432

Thanks,
Troy

[alfradchew]

Hi Troy,

One way to work around this is to dynamically return dcc.RangeSlider itself.

app = html.Div([

    html.Div([
        dcc.Dropdown(
            id = "group",
            options = [
                {'label': 'Group A', 'value': 'A'}, 
                {'label': 'Group B', 'value': "B"}
            ],
            value = "A",
            style = {"font-size": "12px"})
    )]
   
    html.Div(id = "appRangeSlider")
])

@app.callback(
    Output("appRangeSlider", "children"),
    [Input("group", "value")])

def plotRangeSlider(group):
    if group == "A":
        return dcc.RangeSlider(
            id = "my-range-slider",
            min = 0,
            max = 20,
            step = 0.5,
            value=[5, 15])
    else:
        return dcc.RangeSlider(
            id = "my-range-slider",
            min = -5,
            max = 10,
            step = 1,
            value=[-2, 8])

Hope it helps. I am still not sure if this is the best way to do it. Hopefully someone has a better solution.

Thank you.

Regards,
Alfrad

[grofte]

Just use multiple outputs?

@app.callback(
    [Output(component_id='my-range-slider', component_property='min'),
     Output(component_id='my-range-slider', component_property='max'),
     Output(component_id='my-range-slider', component_property='step')],
    [Input(component_id='my_dropdown', component_property='value')])    
def update_slider(selection):
    if selection == 'A':
        minimum = 0
        maximum = 20
        step = 0.5
    elif selection == 'B':
        minimum = -5
        maximum = 10
        step = 1
    return minimum, maximum, step 

And you can set value in this manner as well.