# RangeSlider callback

**URL:** https://community.plotly.com/t/rangeslider-callback/26578
**Category:** Dash Python
**Created:** [July 30, 2019, 1:37pm UTC](https://community.plotly.com/t/rangeslider-callback/26578 "2019-07-30T13:37:19Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Jason4](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@Jason4](https://community.plotly.com/u/Jason4)
#### Post date: [July 30, 2019, 1:37pm UTC](https://community.plotly.com/t/rangeslider-callback/26578/1 "2019-07-30T13:37:19Z")

</div>

Hi guys. Is there a means of applying a RangeSlider call back to the whole dataset after filtering , so that it affects all the graphs and other time series component of your dashboard rather than applying it to each single graph. I want to be able to apply the start and end month to my whole dashboard.

dcc.RangeSlider(  
id=“range-slider”,  
min=1,  
max=12,  
step=3,  
value=[3, 7],  
marks={  
1: “January”,  
2: “February”,  
3: “March”,  
4: “April”,  
5: “May”,  
6: “June”,  
7: “July”,  
8: “August”,  
9: “September”,  
10: “October”,  
11: “November”,  
12: “December”,  
}

which component do i need to pass my callback on and how do i script the callback.Any help?

---

<div class="post-metadata">

### Author: ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)
#### Post date: [July 30, 2019, 1:54pm UTC](https://community.plotly.com/t/rangeslider-callback/26578/2 "2019-07-30T13:54:51Z")

</div>

At a high level, you can have the range slider callback output your filtered data set to a hidden Div or dcc.Store. You can then have the callbacks that handle your graphs trigger on the change to this dataset.

---

<div class="post-metadata">

### Author: ![Jason4](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@Jason4](https://community.plotly.com/u/Jason4)
#### Post date: [July 31, 2019, 8:06am UTC](https://community.plotly.com/t/rangeslider-callback/26578/3 "2019-07-31T08:06:42Z")

</div>

I did something similar but for some reasons i cant get the callback to do any actions when i use my rangeSlider.

Here is my code:

Defining filter:

```
def filter_dataframe(month_slider):
    dff=df[(df.index>dt.datetime(month_slider[0]))
    &(df.index<dt.datetime(month_slider[1]))]
    return dff

```

layout:

```
 `dcc.Store(id='filtered_data')`

dcc.RangeSlider(
                    id="range-slider",
                    min=1,
                    max=12,
                    step=3,
                    value=[3, 7],
                    marks={
                        1: "January",
                        2: "february",
                        3: "March",
                        4: "April",
                        5: "May",
                        6: "June",
                        7: "July",
                        8: "August",
                        9: "September",
                        10: "October",
                        11: "November",
                        12: "December",
                    }

```

callback:

```
@app.callback(Output('filtered_data','data'),
[Input('range_slider','value')])
def update_dataframe(range_slider):
    df=filter_dataframe(range_slider)
    return df
```

---

<div class="post-metadata">

### Author: ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)
#### Post date: [July 31, 2019, 12:12pm UTC](https://community.plotly.com/t/rangeslider-callback/26578/4 "2019-07-31T12:12:44Z")

</div>

It took me a hot second but your callback has `range_slider` but your range slider was created with `id=range-slider`…dash vs underscore.

---

<div class="post-metadata">

### Author: ![Jason4](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@Jason4](https://community.plotly.com/u/Jason4)
#### Post date: [August 1, 2019, 7:59am UTC](https://community.plotly.com/t/rangeslider-callback/26578/5 "2019-08-01T07:59:34Z")

</div>

Thanks for the correction @flyingcujo. That still is not the issue with the code. Cant get it to filter my dataframe on my graphs when i use the rangeSlider.

---

<div class="post-metadata">

### Author: ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)
#### Post date: [August 1, 2019, 12:33pm UTC](https://community.plotly.com/t/rangeslider-callback/26578/6 "2019-08-01T12:33:37Z")

</div>

where is `df` defined? Is this a global variable? For debugging, can you provide a sample `df`?

---

<div class="post-metadata">

### Author: ![Jason4](https://avatars.discourse-cdn.com/v4/letter/j/a5b964/32.png) [@Jason4](https://community.plotly.com/u/Jason4)
#### Post date: [August 12, 2019, 7:46am UTC](https://community.plotly.com/t/rangeslider-callback/26578/7 "2019-08-12T07:46:40Z")

</div>

Hi @flyingcujo. I defined my df out of the app.layout, pivoted it to get the my pivots,defined all my traces for my graphs and then just called them within the app.layout. Should the call back for my dcc.Store be called first , or do i need to define and create all my pivots and traces within the app.layout??

---

<div class="post-metadata">

### Author: ![flyingcujo](https://avatars.discourse-cdn.com/v4/letter/f/e480ec/32.png) [@flyingcujo](https://community.plotly.com/u/flyingcujo)
#### Post date: [August 12, 2019, 12:44pm UTC](https://community.plotly.com/t/rangeslider-callback/26578/8 "2019-08-12T12:44:41Z")

</div>

I only have layout code in my `layout.py` file, just to keep it separate from my callbacks. As long as all your componts are defined prior to invoking `app.server`, it really doesn’t matter where you callbacks, layout, etc are located.

Per the FAQ:

> All your callbacks must be defined before your Dash app’s server starts running, which is to say, before you call `app.run_server(debug=True)`

Regarding the calling order of your callbacks, it all depends on whether or not you have components “chained”, i.e. user pressing component 1 when then triggers callback A, whose outtput triggers callback B, etc.