Reset dcc.RangeSlider to initial value

Hey guys, been trying to implement a ‘clear all filters’ button in my dashboard but got stuck in cleaning the value from a dcc.RangeSlider component.

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

app = Dash(__name__)

app.layout = html.Div(
    [
        html.H1(id='my_value'),
        dcc.RangeSlider(
                id = 'my_slider',
                min = 0,
                max = 5,
        ),
        html.Button('Reset Value', id='reset_button'),
    ]
)

@app.callback(
    Output('my_value', 'children'),
    Input('my_slider', 'value')
)
def update_text(value):
    return str(value)

@app.callback(
    Output('my_slider', 'value'),
    Input('reset_button', 'n_clicks')
)
def reset_slider(n_clicks):
    return None
app.run_server(debug=True, use_reloader=True)

In the above snippet, you can change the internal value but the slider selector will stay wrong. Is there a way to fix this?

Welcome to the community @zirondi

Are you looking to reset the handles of the slider as well? Like this?

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

app = Dash(__name__)

app.layout = html.Div(
    [
        html.H1(id='my_value'),
        dcc.RangeSlider(
                id = 'my_slider',
                min = 0,
                max = 5,
        ),
        html.Button('Reset Value', id='reset_button'),
    ]
)

@app.callback(
    Output('my_value', 'children'),
    Input('my_slider', 'value')
)
def update_text(value):
    return str(value)

@app.callback(
    Output('my_slider', 'value'),
    Input('reset_button', 'n_clicks')
)
def reset_slider(n_clicks):
    return [0,5]


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

Hey Adam, thanks for answering! Your videos have helped me a lot!

Are you looking to reset the handles of the slider as well? Like this?

Exactly, curiously in the snippet it works, but I can not make it work in my app, I keep getting a “Cannot read properties of null (reading ‘map’)” which is not very helpful.

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: Cannot read properties of null (reading 'map')

    at new n (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/dcc/async-slider.js:1:53975)

    at n.<anonymous> (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/dcc/async-slider.js:1:33954)

    at new n (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/dcc/async-slider.js:1:44295)

    at constructClassInstance (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/deps/react-dom@16.v2_4_1m1652885587.14.0.js:13015:20)

    at updateClassComponent (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/deps/react-dom@16.v2_4_1m1652885587.14.0.js:17235:7)

    at beginWork (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/deps/react-dom@16.v2_4_1m1652885587.14.0.js:18755:18)

    at HTMLUnknownElement.callCallback (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/deps/react-dom@16.v2_4_1m1652885587.14.0.js:182:16)

    at Object.invokeGuardedCallbackDev (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/deps/react-dom@16.v2_4_1m1652885587.14.0.js:231:18)

    at invokeGuardedCallback (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/deps/react-dom@16.v2_4_1m1652885587.14.0.js:286:33)

    at beginWork$1 (http://127.0.0.1:8050/sim_causa_base/_dash-component-suites/dash/deps/react-dom@16.v2_4_1m1652885587.14.0.js:23338:9)

The range slider doesn’t even load properly.


It was supposed to be right under “Ano de Óbito”

This is the callback function, which both has the clear and apply filters button (same output for both cases)

@app.callback(
    [
        #My dropdowns and range slider + their disabled status
    ],
    [
        #Both buttons as Inputs and the dropdown as well for the dropdowns for the disable logic
    ],
    prevent_initial_call=True
)
def update_filtros(n_clicks_apply,  n_clicks_clear, etc...):

    #I have both an apply button and a clear button in the same callback, so I need to check which one was clicked
    component_id = ctx.triggered[0]['prop_id'].split('.')[0]
    if component_id != 'clear_button':
            #Create the filter
    else:
        #Reset filter to default, ano is the RangeSlider, the rest are dropdowns
        filters = ''
        ano = [1996, 2019]
        capitulos = []
        categorias = []
        subcategorias = []
        uf = []
        municipios = []


     #Logic for the dropdowns
    return filters values

This is the component, which I presume there is nothing wrong with.

html.Div([
        html.H1(
            title,
            className = 'titulo-dropfiltro'
            ),

        dcc.RangeSlider(
            id = id_cmpt,
            min = min_value,
            max = max_value,
            marks = marks,
            step =  step,
            tooltip = {"placement": "top", "always_visible": False},
        ),
    ])

Btw I’m not a fan of this callback structure where I have both apply and clear buttons in the same callback.
I’m using a dcc.Store to move the generated filters between callbacks and I feel there may be a better way but I could not develop a better structure to solve this clear filters button, I will gladly take some advice.

Thanks for the help!

EDIT

I figured it out, this StackOverflow gave me the answer, basically, my rangeSlider didn’t have a default value during the initiation of the app, setting a value = in the slider fixed it for me.