Merge pull request #3723 from terminalchai/fix-slider-mark-height

Fix misaligned slider marks with empty labels

Author: KoolADE85

CHANGELOG.md

@@ -12,6 +12,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Fixed
 - [#3690](https://github.com/plotly/dash/pull/3690) Fixes Input when min or max is set to None
+- [#3723](https://github.com/plotly/dash/pull/3723) Fix misaligned `dcc.Slider` marks when some labels are empty strings
 
 ## [4.1.0] - 2026-03-23
 

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;

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() == []