# How to add range slider or widget on my code

**URL:** <https://community.plotly.com/t/how-to-add-range-slider-or-widget-on-my-code/91420>\
**Category:** 📊 Plotly Python\
**Tags:** question\
**Created:** [March 24, 2025, 6:45am UTC](https://community.plotly.com/t/how-to-add-range-slider-or-widget-on-my-code/91420 "2025-03-24T06:45:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![androiduser](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@androiduser](https://community.plotly.com/u/androiduser)\
**Post date:** [March 24, 2025, 6:45am UTC](https://community.plotly.com/t/how-to-add-range-slider-or-widget-on-my-code/91420/1 "2025-03-24T06:45:21Z")

</div>

#Im beginner on python plotly and i stuck on this part, whenever i add code from documentation, i got an error.

import pandas as pd  
import plotly.express as px  
import plotly.graph\_objects as go

#load csv file  
df = pd.read\_csv(‘input\_file.csv’)

fig = px.scatter(df, x = ‘datetime’,

```
             y = ['observed_tide', 'estimated_tide', 'deviation'], 
             color = 'variable',
             labels = {'variable': 'legend', 'datetime': 'Date/Time'})

```

fig.update\_layout (title = ‘Tide Visualization’, font=dict(size=18))

fig.show()

---

<div class="post-metadata">

**Author:** ![r-beginners](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@r-beginners](https://community.plotly.com/u/r-beginners)\
**Post date:** [March 24, 2025, 8:39am UTC](https://community.plotly.com/t/how-to-add-range-slider-or-widget-on-my-code/91420/2 "2025-03-24T08:39:07Z")

</div>

Since your data is unknown, here is the code to add a range slider based on similar data in the [plotly reference](https://plotly.com/python/range-slider/#basic-range-slider-and-range-selectors).

```auto
import plotly.express as px

df = px.data.stocks()
fig = px.scatter(df, x="date", y=["GOOG","AAPL","NFLX"])
fig.update_layout(title="Tide Visualization", font=dict(size=18))
fig.update_layout(xaxis=dict(rangeslider=dict(visible=True)))
fig.show()

```

 ![newplot - 2025-03-24T173842.822](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/6/464bd5bc6e2a67801c46260de4013e7503fe6284.png)

---

<div class="post-metadata">

**Author:** ![androiduser](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@androiduser](https://community.plotly.com/u/androiduser)\
**Post date:** [March 24, 2025, 8:49am UTC](https://community.plotly.com/t/how-to-add-range-slider-or-widget-on-my-code/91420/3 "2025-03-24T08:49:50Z")

</div>

Thank you but the graph inside the slider is not showing

 ![Screenshot 2025-03-24 164842](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/9/f/9f926a3d9a1f709098ebfb44dba258cea2d6868a.jpeg)

---

<div class="post-metadata">

**Author:** ![r-beginners](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@r-beginners](https://community.plotly.com/u/r-beginners)\
**Post date:** [March 24, 2025, 12:36pm UTC](https://community.plotly.com/t/how-to-add-range-slider-or-widget-on-my-code/91420/4 "2025-03-24T12:36:11Z")

</div>

What are the differences from the data used in the reference? Submit reproducible data first. And what version of Plotly are you using?

---

<div class="post-metadata">

**Author:** ![androiduser](https://avatars.discourse-cdn.com/v4/letter/a/3e96dc/32.png) [@androiduser](https://community.plotly.com/u/androiduser)\
**Post date:** [March 25, 2025, 12:28am UTC](https://community.plotly.com/t/how-to-add-range-slider-or-widget-on-my-code/91420/5 "2025-03-25T00:28:44Z")

</div>

Version 6.0.1

[CSV FILE](https://limewire.com/d/RlEYV#0EPxsVxXIF)

---

<div class="post-metadata">

**Author:** ![r-beginners](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@r-beginners](https://community.plotly.com/u/r-beginners)\
**Post date:** [March 25, 2025, 1:43am UTC](https://community.plotly.com/t/how-to-add-range-slider-or-widget-on-my-code/91420/6 "2025-03-25T01:43:01Z")

</div>

I believe it is due to the number of data counts you are using. See here for [more information](https://plotly.com/python/performance/#webgl-with-plotly-express). If you change the render mode to SVG, the range slider will be enabled, but moving the slider will cause extremely poor performance and use. (Depending on your personal environment.) See here for an explanation of [WegGL](https://plotly.com/python/performance/#webgl).

```auto
import pandas as pd
import plotly.express as px

df = pd.read_csv('output_file.csv')

fig = px.scatter(df,
                 x='datetime',
                 y=['observed_tide', 'estimated_tide', 'deviation'],
                 color = 'variable',
                 labels = {'variable': 'legend', 'datetime': 'Date/Time'},
                 render_mode='svg', # update
                )

fig.update_layout(title='Tide Visualization', font=dict(size=18))
fig.update_layout(xaxis=dict(rangeslider=dict(visible=True)))

fig.show()

```

 ![newplot - 2025-03-25T104307.280](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/1/612dedca90ecc38c209ab7f0558f0620054873c6.png)