Use Callback to dynamically set the marks of a rangeslider

Dash Python
1

Is it possible to use a callback to dynamically update marks for a rangeslider? So far, no luck with using a callback to return a dictionary.

app = dash.Dash()



app.layout= html.Div([html.Button('Test Slider',id='test'), dcc.RangeSlider(id='range_test')])



@app.callback(Output('range_test','marks'),[Input('test','n_clicks')])

def test(clicks):
    
    if clicks == 1:
        return {1:'1',2:'2',3:'3'}

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

Thanks in advance for the help!

2

Did you try to provide min and max props to your dcc.RangeSlider component?

3

This sounds like a bug. It should work (i.e. it should be possible to update any property of any component through a callback). I made an issue here: setting marks of rangeslider through callback doesn't work? · Issue #291 · plotly/dash-core-components · GitHub

4

What version of dash-core-components are you using? That example is working for me with 0.28.0

image

5

The example broke when I used floating points instead of integers for the keys of the dictionary, e.g. {1.0: '1', ...}

6

Thanks so much for the fast response to this question. You guys are great. I have a couple of other things to work out but I think the float vs. integer is the issue. All of the other callbacks do seem to work.

Confirmed. The issue was that my marks were values generated from a dataframe using numpy.unique. The product of this was, of course, an array with dtype=float. https://docs.scipy.org/doc/numpy/reference/generated/numpy.ndarray.html .

Once changed to integers, this works perfectly. Thanks again for the fast and thorough follow-up.

7

Hi revisiting this … I can generate marks = {dictionary object} through the callback, but how does one set the min, max, allowCross=False etc. settings?

I tried returning {min=-5, max = 5, allowCross=False, {-5:‘5’, -2 : ‘-2’, 0 : ‘0’, 2 : ‘2’, 5 : ‘5’} }, but this did not work.