From 3dc4abbd3ba8c2285f8f9f2270bf999e18ebf555 Mon Sep 17 00:00:00 2001 From: terminalchai Date: Fri, 3 Apr 2026 02:02:22 +0530 Subject: [PATCH] fix: align slider marks with empty labels --- .../src/components/css/sliders.css | 1 + .../tests/integration/sliders/test_sliders.py | 27 +++++++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/components/dash-core-components/src/components/css/sliders.css b/components/dash-core-components/src/components/css/sliders.css index 95ebe582d3..cb6d4e41cd 100644 --- a/components/dash-core-components/src/components/css/sliders.css +++ b/components/dash-core-components/src/components/css/sliders.css @@ -92,6 +92,7 @@ .dash-slider-mark { position: absolute; font-size: 12px; + height: 12px; line-height: 12px; color: var(--Dash-Text-Strong); white-space: nowrap; diff --git a/components/dash-core-components/tests/integration/sliders/test_sliders.py b/components/dash-core-components/tests/integration/sliders/test_sliders.py index fed33c30d8..1364a6ef01 100644 --- a/components/dash-core-components/tests/integration/sliders/test_sliders.py +++ b/components/dash-core-components/tests/integration/sliders/test_sliders.py @@ -734,3 +734,30 @@ def update_rangeslider(value): dash_dcc.wait_for_text_to_equal("#rangeslider-output", "RangeSlider: 10-75") assert dash_dcc.get_logs() == [] + + +def test_slsl020_empty_mark_labels_keep_tick_alignment(dash_dcc): + app = Dash(__name__) + marks = {val: (str(val) if val % 10 == 0 else "") for val in range(0, 151, 5)} + + app.layout = dcc.Slider( + id="slider-empty-mark-labels", + min=0, + max=150, + step=None, + value=0, + marks=marks, + ) + + dash_dcc.start_server(app) + dash_dcc.wait_for_element("#slider-empty-mark-labels") + + rendered_marks = dash_dcc.find_elements( + "#slider-empty-mark-labels .dash-slider-mark" + ) + labeled_mark = next(mark for mark in rendered_marks if mark.text) + empty_mark = next(mark for mark in rendered_marks if not mark.text) + + assert labeled_mark.size["height"] == 12 + assert empty_mark.size["height"] == labeled_mark.size["height"] + assert dash_dcc.get_logs() == []