# Chart and slider

**URL:** https://community.plotly.com/t/chart-and-slider/39958
**Category:** Dash Python
**Created:** [May 23, 2020, 11:57am UTC](https://community.plotly.com/t/chart-and-slider/39958 "2020-05-23T11:57:23Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![cyril\_lm](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@cyril\_lm](https://community.plotly.com/u/cyril_lm)
#### Post date: [May 23, 2020, 11:57am UTC](https://community.plotly.com/t/chart-and-slider/39958/1 "2020-05-23T11:57:23Z")

</div>

Plotly offers a very good slider for timeseries chart (see below)  
I am trying to see if I could use a callback with this slider (rather than using dcc.Slider and rebuild from scratch)  
I tried to find doc but totally failed  
Could someone point me in the right direction ?

Thanks

xaxis=dict(

```
                                rangeselector=dict(

                                                    buttons=list([

                                                        dict(count=1,

                                                            label="1m",

                                                            step="month",

                                                            stepmode="backward"),

                                                        dict(count=6,

                                                            label="6m",

                                                            step="month",

                                                            stepmode="backward"),

                                                        dict(count=1,

                                                            label="YTD",

                                                            step="year",

                                                            stepmode="todate"),

                                                        dict(count=1,

                                                            label="1y",

                                                            step="year",

                                                            stepmode="backward"),

                                                        dict(count=5,

                                                            label="5y",

                                                            step="year",

                                                            stepmode="backward"),                                        

                                                        dict(step="all")

                                                    ])

                                                ),

                                rangeslider=dict(visible=True),

                                type="date")

                    )
```

---

<div class="post-metadata">

### Author: ![Emmanuelle](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emmanuelle/32/7853_2.png) [@Emmanuelle](https://community.plotly.com/u/Emmanuelle)
#### Post date: [May 23, 2020, 12:25pm UTC](https://community.plotly.com/t/chart-and-slider/39958/2 "2020-05-23T12:25:25Z")

</div>

Hi @cyril_lm, moving the rangeslider triggers a `relayoutData` event of the `dcc.Graph` (see the [tutorial on interactive graphing](https://dash.plotly.com/interactive-graphing)). You can listen to `relayoutData` and check that the content is a change of the range of the xaxis, as in the code below.

```auto
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
from dash.dependencies import Input, Output

app = dash.Dash( __name__ )

# Load data
df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]

# Create figure
fig = go.Figure()

fig.add_trace(
    go.Scatter(x=list(df.Date), y=list(df.High)))

# Set title
fig.update_layout(
    title_text="Time series with range slider and selectors"
)

# Add range slider
fig.update_layout(
    xaxis=dict(
        rangeslider=dict(
            visible=True
        ),
        type="date"
    )
)

app.layout = html.Div([
        dcc.Graph(id='graph', figure=fig),
        html.Div(id='div')
        ])

@app.callback(
    dash.dependencies.Output('div', 'children'),
    [dash.dependencies.Input('graph', 'relayoutData')])
def display_range(fig_data):
    if fig_data is not None and 'xaxis.range' in fig_data:
        return "%s - %s " %(fig_data['xaxis.range'][0],
                            fig_data['xaxis.range'][1])
    return dash.no_update

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

```

---

<div class="post-metadata">

### Author: ![cyril\_lm](https://avatars.discourse-cdn.com/v4/letter/c/9e8a1a/32.png) [@cyril\_lm](https://community.plotly.com/u/cyril_lm)
#### Post date: [May 23, 2020, 4:47pm UTC](https://community.plotly.com/t/chart-and-slider/39958/3 "2020-05-23T16:47:40Z")

</div>

thats awesome, thanks a lot !