Dash的dcc.Slider如何隐藏指定刻度标记且可拖动到对应无标记值

云上老周

2026-7-31

解决方案

要实现这个需求，你需要通过dcc.Slider的marks参数自定义刻度显示规则，同时保留原有的step值保证滑块能拖动到10、15这些数值。具体修改如下：

完整修改后的代码

from dash import Dash, dcc, html, Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Slider(
        min=0,
        max=20,
        step=5,
        value=10,
        id='my-slider',
        # 自定义刻度显示：仅保留0、5、20的标签，隐藏10、15的标签
        marks={
            0: {'label': '0'},
            5: {'label': '5'},
            10: {'label': '10', 'style': {'display': 'none'}},
            15: {'label': '15', 'style': {'display': 'none'}},
            20: {'label': '20'}
        }
    ),
    html.Div(id='slider-output-container')
])

@app.callback(
    Output('slider-output-container', 'children'),
    Input('my-slider', 'drag_value'))
def update_output(value):
    return 'You have selected "{}"'.format(value)

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

关键改动说明

显式声明参数：把原位置参数0, 20, 5改为min=0、max=20、step=5的显式写法，让代码逻辑更清晰。
自定义刻度标记：通过marks字典控制每个刻度的显示状态：
- 对需要展示的刻度（0、5、20），直接设置对应标签文本；
- 对需要隐藏的刻度（10、15），添加style={'display': 'none'}样式隐藏标签，但step=5的设置仍能保证滑块可以拖动到这些数值。
回调逻辑无需修改：原回调函数可以正常获取包括10、15在内的所有滑块值，直接复用即可。