# How do I update the graph when using the slider?

**URL:** <https://community.plotly.com/t/how-do-i-update-the-graph-when-using-the-slider/55098>\
**Category:** 📊 Plotly Python\
**Created:** [July 28, 2021, 1:28pm UTC](https://community.plotly.com/t/how-do-i-update-the-graph-when-using-the-slider/55098 "2021-07-28T13:28:51Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ohlamon77](https://avatars.discourse-cdn.com/v4/letter/o/97f17d/32.png) [@Ohlamon77](https://community.plotly.com/u/Ohlamon77)\
**Post date:** [July 28, 2021, 1:28pm UTC](https://community.plotly.com/t/how-do-i-update-the-graph-when-using-the-slider/55098/1 "2021-07-28T13:28:51Z")

</div>

There is 2D data that can be conveniently accessed by index (data are frames (2D matrix)). I’m trying to make a slider to display each frame separately, but I don’t know how to update the rendered image when using the slider.

import pandas as pd

import numpy as np

arr = np.random.rand(100, 126)

#df = pd.DataFrame(arr)

arr1=pd.DataFrame(arr)

xf = [arr1[arr1.columns[l:l+10]] for l in range(0, arr1.shape[1], 10)]

# Create and add slider

fig=px.imshow(xf[0])

steps =

#print(len(xf))

# Create figure

for i in range(len(xf)):

```
step = dict(

    method="update",

    args=[{"visible": [False] * len(xf)},

          {"title": "Slider switched to step: " + str(i)}], # layout attribute

)

step["args"][0]["visible"][i] = True # Toggle i'th trace to "visible"

steps.append(step)

```

sliders = [dict(

```
active=1,

currentvalue={"prefix": "Step Frame: "},

pad={"t": 1},

steps=steps,

```

)]

# 

fig.update\_layout(

```
sliders=sliders

```

)

fig.show()