Positioning of elements in Plotly-Dash

Question

I made a basic Dashboard that looks like below, the working minimal example attached on the bottom of this post. I want to (but have no idea how to) center the slider and the with (currently hardcoded to 500 pix) about 80% of the figure width, responsive to the browser window size. How can i do this? Thanks!

[metainfo: i'd appreciate some advice on where to look for/ how to search for such topic; i seem to be googling the wrong things and have a hard time putting together the pieces of the Dash documentation] [ enter image description here ]1

import dash
import dash_table
import dash_daq as daq
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np

# pydata stack
import pandas as pd
from sqlalchemy import create_engine

def makeplot(slider):
    gobar=[go.Bar(
                x=[1,2,3],
                y=[1,slider,5],
                name='I am {}'.format(slider)) ]
    content= {
            'data':gobar,
            'layout':dict(title='Mygraph')
            }
    return content

## layout
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

## app
app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    daq.Slider(
        id='myslider',
        min=1,
        max=5,
        value=3,
        marks={str(i): 'Label_'+str(i) for i in np.arange(1,6)},
        step=None,
        size=500),
])

## callbacks
@app.callback(
    Output('graph-with-slider', 'figure'),
    [Input('myslider', 'value')])
def update_figure(myval):
    content=makeplot(myval)
    return content

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

user_1805743 · Answer

I found the solution. essentially using the dcc slider (not the daq one), and adding padding puts the slider nicely in the center:

html.Div([
        dcc.Slider(
            id='year-slider',
            min=0,
            max=len(t.freqs)-1,
            value=1,
            marks={str(i): key for i,key in enumerate(t.freqs.keys())},
            # marks = {displaystring : internal value}
            step=None,
            # size=500                
        ),
    ],
    style={'width': '50%','padding-left':'25%', 'padding-right':'25%'}
)

Positioning of elements in Plotly-Dash

1 Answers