Plotly Python how make a slider always visible whenever I scroll down?

user_9583035 0
Viewed 96

I have a Slider on top of my page, below of my slider i have a lot of subplot.

As u can see in fig: enter image description here

I need my slider always visible whenever I scroll down to see more subplots.

How can i do that in plotly (PYTHON)?

Here is the code of my Div layout:

self.app.layout = html.Div([
         

html.P("Frame"),
            dcc.Slider(
    id='slider-position', 
    min=1, max=40000, value=2000, step=1000,
    marks={1: '1',10000:'10000',20000:'20000',30000:'30000', 40000: '40000'}
        ),
        dcc.Graph(id='basic-interactions', figure=fig),
        html.Div(className='row', children=[
            html.Div([html.Pre(id='click-data', style=styles['pre']),],
                     className='three columns')
        ])
    ])
plotly python
1 Answers

I realized how can i do it,is not so straightforward as i would like , but it work .

First you need change this part of ur code:

app = dash.Dash(__name__)

instead of

app = dash.Dash()

He is more detail of this part : https://dash.plotly.com/external-resources

Than the next step is create a new div into the main Div and put yout slider into it. As you can see in the code above:

self.app.layout = html.Div(children=[html.P(id='placeholder'),
        html.Div(id='divfixed',children=[dcc.Slider(
        id='slider-position', 
        min=1, max=45000, value=2000, step=1,
        marks={1: '1',10000:'10000',20000:'20000',30000:'30000', 45000: '45000'}
            ),], style = {'padding-left':'55px', 'padding-right':'55px' ,'z-index': '999' }),
                 html.Div([
            dcc.Graph(id='basic-interactions', figure=fig),
            html.Div(className='row', children=[
                html.Div([html.Pre(id='click-data', style=styles['pre']),],
                         className='three columns')
            ])])
        ])

Attetion in this part

 html.Div(id='divfixed',children=[dcc.Slider(
            id='slider-position', 
            min=1, max=45000, value=2000, step=1,
            marks={1: '1',10000:'10000',20000:'20000',30000:'30000', 45000: '45000'}
                ),]

that is necessay give an ID for this Div And here attetion here :

style = {'padding-left':'55px', 'padding-right':'55px' ,'z-index': '999' }),

'z-index': '999' that info is important

Than you need creat a folder with name assets in same lvl of your app.py

Like that:

- app.py
- assets/
    |-- your_css_file.css

Into that u need create a file with ext ".css"

U need fill this file with the contents of this link

https://codepen.io/chriddyp/pen/bWLwgP.css

Just copy and paste in some notepad and save with ext ".css"

Open this file and add this info:

#divfixed { position: sticky; top: 0; background-color: white }

The sintaxe is :

#name_that_you_give_in_id__off_div_slider { position: sticky; top: 0; background-color: white }

In Dash Plotly you need some html knowledge to build everything you want. For example to simple change the color of slider u need do the same step but add this info:

 .rc-slider-track {
  position: absolute;
  left: 0;
  height: 4px;
  border-radius: 6px;
  background-color: red;
}
user_95830350
Related