Plotly Dash中RangeSlider组件marks标记标签无法正常显示问题

你遇到的RangeSlider标记显示不全问题，本质是组件外层容器的宽度不足，左右边缘的标记文本被容器边界截断，才会出现仅显示半个数字的情况。

解决方法 #

• 方法1：给滑块的外层Div添加左右内边距，预留足够的标记显示空间，修改后的完整代码参考如下：

import pandas as pd
import dash
from dash import html, dcc

data = [[30, 100], [31, 200], [32, 80], [33, 90], [34, 25], [35, 125],[36, 130],[37, 159],
       [38, 60]]
df = pd.DataFrame(data, columns = ['week', 'orders'])

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H3('Week Range'),
    html.Div([
        dcc.RangeSlider(
            id='slider',
            min=df["week"].min(),
            max=df["week"].max(),
            value=[30, 38],
            step=None,
            marks={int(i):int(i) for i in list(df["week"].unique())}
        )
    # 左右30px的内边距专门预留为两端标记的显示空间
    ], style={'padding': '0 30px', 'width': '85%', 'margin': '0 auto'})
])

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

• 方法2：给marks文本添加强制不换行样式，避免文本被挤压变形，仅需要修改marks参数即可：

marks={
    int(i): {
        "label": str(int(i)),
        "style": {"whiteSpace": "nowrap", "minWidth": "20px", "textAlign": "center"}
    } 
    for i in df["week"].unique()
}

如果以上调整后仍有显示问题，可以直接给RangeSlider组件添加宽度样式：dcc.RangeSlider(..., style={'width': '100%'})

内容的提问来源于stack exchange，提问作者Ahmed Galal