Reset dcc.RangeSlider to initial value

Dash Python
3

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.

image
image997×389 14.3 KB

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.

2 Likes