I have been trying for almost 2 hours to adjust the width. I’m not seeing a parameter in the documentation and when using styling (CSS) the slider turns into a dot when i use ‘flex’.
Has anyone been able to do this? I would have guessed it was a 10 sec job, but all tries using ‘width’ and similar resulted in errors.
Hi @plottingly, can you maybe share the corresponding piece of code?
I have no issue modifying the width of dcc.Slider using CSS…
Yes, absolutely. I have tried various combinations of these lines:
html.Div([dcc.Slider(70, 85, 1, value=10, id='my-slider')],
style = {
'width': '50%',
#'margin': '0 auto',
'display': 'flex',
#'flex-direction': 'column',
'justify-content': 'center',
'align-items': 'center'}
#'height': '100vh',
#'overflow': 'hidden'}
Since it’s the dcc.Slider’s width you wish to change, I’d suggest you add the width parameter in a separate style.css and specify the dcc.Slider’s className.
Dash app code:
html.Div([dcc.Slider(70, 85, 1, value=10, id='my-slider', className = 'slider')],
style = {
#'margin': '0 auto',
'display': 'flex',
#'flex-direction': 'column',
'justify-content': 'center',
'align-items': 'center'}
#'height': '100vh',
#'overflow': 'hidden'}
)
style.css code:
.slider {
width: 50%;
}
Thanks for the input. Where in the .py file would you put the .slider section?
Inside the app.layout or?
Sorry for the basic question. I have spent many many hours looking into dash and still get stuck on basics.
No worries. So the .slider code goes into your CSS stylesheet.
Inside your current app’s folder, you’d want to create a new folder called assets, that’s where you want to create the style.css and add the .slider code:
- app.py
- assets/
|-- style.css
This allows you to keep all your CSS styling separate from the actual Dash app.
I see how that makes sense.
But I would very strongly prefer to control it in the same document, and preferably in the same line where I define other parameters for the element.
I’m going to have various user inputs and to me a separate file makes more sense for stuff like defining an overall theme.
Really hope it’s possible to do things like this another way - fingers crossed.
lør. 26. aug. 2023 19.27 skrev Julie Hartz via Plotly Community Forum <notifications@plot.discoursemail.com>:
Hi @plottingly
It’s odd that dcc.Slider does not have it’s own style prop - most Dash components do. If you don’t want to add custom CSS in the assets folder as @jhupiterz recommended, you can wrap the dcc.Slider in a html.Div and apply the style prop to that container. Here is an example:
html.Div(
[
html.Div(dcc.Slider(70,85,1, value=10, id='my-slider' ), style={'width':'50%'}),
],
style={
'display': 'flex',
'justify-content': 'center',
}
)
That should be the same as what I have below right?
Update: I’m actually now back to scratch - with this code the slider becomes a small dot - looks like the slider scale is compressed.
3.5 hours into trying to set the size of a scale - rough start with Dash, but I hope it will be done.
html.Div([dcc.Slider(70, 85, 1, value=10, id='Slider_life_exp')],
style = {
'width' : '50%',
'display' : 'flex',
'justify-content': 'center' } ),
@plottingly - no it’s not the same. Try copy & paste my code and you will see it works. Below is a complete app to run. The difference is that the 'display': 'flex', is applied to the outer container and the width is applied to the slider, which is an item inside the flex container.
I also recommend using Dash Bootstrap Components or Dash Mantine Components – it makes app layout and design much easier 
from dash import Dash, html, dcc
app = Dash(__name__)
app.layout = html.Div(
[
html.Div(dcc.Slider(70,85,1, value=10, id='my-slider' ), style={'width':'50%'}),
],
style = {
'display': 'flex',
'justify-content': 'center',
}
)
if __name__ == "__main__":
app.run_server(debug=True)
Thanks. Got it working now and will look into your recommendations.
Turns out it’s just very difficult to use dash without prior experience in HTML and CSS. Takes extreme effort to get the various ( [ { to match once the app expands in size.
Using the other two libraries will make it easier, but it does help to know some of the basics about HTML and CSS if you want to fine tune the design.
Here are a couple of tips for managing all the brackets
Use a code formatter like Black. It’s seriously like magic 
With one command it automatically formats your code and lines up all the darn brackets in a consistent easy-to-read way. Saves hours of tedious hand-formatting.
Make smaller component building block and give them variable name. You can then place them into your layout or into other component blocks using the variable name. This helps by making your code easier to read and maintain, and modular. Here’s a small example using Dash Bootstrap Components:
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app_header = html.Div(
"My Super Cool App", className="text-center p-3 bg-primary text-white h4 "
)
sliders = html.Div(
[
"Slider 1 description",
dcc.Slider(70, 85, 1, value=10, id="my-slider1", className="mb-2"),
"Slider 2 description",
dcc.Slider(10, 20, 1, value=10, id="my-slider2"),
],
)
control_card_title = html.Div("My App Controls", className="text-center")
control_card = dbc.Card(
[
control_card_title,
sliders,
],
body=True,
)
graph = dbc.Card(dcc.Graph())
app.layout = dbc.Container(
[
app_header,
dbc.Row([dbc.Col(control_card, md=6), dbc.Col(graph)], justify="center"),
],
fluid=True,
)
if __name__ == "__main__":
app.run_server(debug=True)
Hi Ann
Forgot to answer you here. But your inputs were a great help in getting started.
Hope to show some of my work to other members here soon - seems like that’s a thing.