How to make slider component react instantaneously

Dash Python
1

I am new in dash and my question might be straight forward.

I have noticed that the callback for the slider will not work when I drag the slider until I unclick the slider.

if you are familiar with javascript this is like the “click” event (as in slider.addEventListener(“click”,()=>{ …});), but I want it to behave like the “input” event.

I have attached a screenshot to show what I mean. please note that my curser is not showing in the screenshot because the program I am using does not show the cursor and I don’t know how to change the setting.

and here is the code:

from dash import dcc, html, Input, Output, Dash

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

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Slider(0, 10, 1.0,
               value=5,
               id='my-slider'
    ),
    html.Div(id='slider-output-container')
])

@app.callback(
    Output('slider-output-container', 'children'),
    Input('my-slider', 'value'))
def update_output(value):
    return 'You have selected "{}"'.format(value)

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

1sFYwxNmYJ
1sFYwxNmYJ1890×914 4.92 KB

2

Hi @ibrahimjalal,

Welcome to the community! :slight_smile:

Please take a look on the updatemode and drag_value props in the Slider (here is the reference page).

The relevant part is:

updatemode ( a value equal to: ‘mouseup’ or ‘drag’ ; default 'mouseup' ): Determines when the component should update its value property. If mouseup (the default) then the slider will only trigger its value when the user has finished dragging the slider. If drag , then the slider will update its value continuously as it is being dragged. If you want different actions during and after drag, leave updatemode as mouseup and use drag_value for the continuously updating value.

Long story short, it should be enough to set updatemode="drag". Just bear in mind that this might lead to poor performance if the callbacks using this value are relatively slow.

Hope this helps!

1 Like
3

(post deleted by author)

4

Thank you @jlfsjunior :smiley:!