Merge pull request #3448 from plotly/v4-styling

Slider and Range Slider styling updates

Author: KoolADE85

components/dash-core-components/src/components/css/sliders.css

@@ -7,12 +7,16 @@
     touch-action: none;
     width: 100%;
     height: 14px;
-    padding: 8px 0 28px 0;
+    padding: 18px 0 18px 0;
     box-sizing: border-box;
     /* Override Radix's default margin/padding behavior */
     --radix-slider-thumb-width: 16px;
 }
 
+.dash-slider-root.has-marks {
+    padding: 8px 0 28px 0;
+}
+
 .dash-slider-root[data-orientation='vertical'].has-marks {
     padding-bottom: 0px;
 }
@@ -167,7 +171,7 @@
 .dash-slider-container {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
     width: 100%;
 }
 
@@ -184,7 +188,7 @@
 }
 
 .dash-range-slider-min-input {
-    min-width: 64px;
+    text-align: center;
 }
 
 .dash-range-slider-max-input {
@@ -193,7 +197,7 @@
 
 .dash-range-slider-input {
     width: 64px;
-    margin-top: 8px;
+    text-align: center;
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;

components/dash-core-components/src/fragments/RangeSlider.tsx

@@ -166,6 +166,35 @@ export default function RangeSlider(props: RangeSliderProps) {
         });
     }, [min, max, processedMarks, step, sliderWidth]);
 
+    // Calculate dynamic input width based on digits needed and container size
+    const inputWidth = useMemo(() => {
+        if (!sliderWidth) {
+            return '64px'; // fallback to current width
+        }
+
+        // Count digits needed for min and max values
+        const maxDigits = Math.max(
+            String(Math.floor(Math.abs(minMaxValues.max_mark))).length,
+            String(Math.floor(Math.abs(minMaxValues.min_mark))).length
+        );
+
+        // Add 1 for minus sign if min is negative
+        const totalChars = maxDigits + (minMaxValues.min_mark < 0 ? 1 : 0);
+
+        // Calculate width as percentage of container (5% min, 15% max)
+        /* eslint-disable no-magic-numbers */
+        const minWidth = sliderWidth * 0.05;
+        const maxWidth = sliderWidth * 0.15;
+        const charBasedWidth = totalChars * 12; // approx 12px per character
+        /* eslint-enable no-magic-numbers */
+
+        const calculatedWidth = Math.max(
+            minWidth,
+            Math.min(maxWidth, charBasedWidth)
+        );
+        return `${calculatedWidth}px`;
+    }, [sliderWidth, minMaxValues.min_mark, minMaxValues.max_mark]);
+
     const handleValueChange = (newValue: number[]) => {
         let adjustedValue = newValue;
 
@@ -205,6 +234,7 @@ export default function RangeSlider(props: RangeSliderProps) {
                         <input
                             type="number"
                             className="dash-input-container dash-range-slider-input dash-range-slider-min-input"
+                            style={{width: inputWidth}}
                             value={value[0] ?? ''}
                             onChange={e => {
                                 const inputValue = e.target.value;
@@ -265,7 +295,8 @@ export default function RangeSlider(props: RangeSliderProps) {
                     {showInputs && !vertical && (
                         <input
                             type="number"
-                            className="dash-input-container dash-range-slider-input dash-range-slider-max-input"
+                            className="dash-input-container dash-range-slider-input  dash-range-slider-max-input"
+                            style={{width: inputWidth}}
                             value={value[value.length - 1] ?? ''}
                             onChange={e => {
                                 const inputValue = e.target.value;

components/dash-core-components/tests/integration/misc/test_persistence.py

@@ -168,7 +168,7 @@ def make_output(*args):
         ["4️⃣", "6️⃣"],
         "yes maybe",
         "r",
-        [5, 9],
+        [5, 8],
         22,
         "C",
         "knock knock\nwho's there?",

components/dash-core-components/tests/integration/sliders/test_sliders.py

@@ -30,7 +30,7 @@ def update_output(value):
     dash_dcc.click_at_coord_fractions(slider, 0.5, 0.25)
     dash_dcc.wait_for_text_to_equal("#out", "You have selected 11")
     dash_dcc.click_at_coord_fractions(slider, 0.75, 0.25)
-    dash_dcc.wait_for_text_to_equal("#out", "You have selected 17")
+    dash_dcc.wait_for_text_to_equal("#out", "You have selected 16")
 
     assert dash_dcc.get_logs() == []
 
@@ -265,7 +265,7 @@ def update_output2(value):
 
     dash_dcc.click_and_hold_at_coord_fractions(slider, 0.25, 0.25)
     dash_dcc.move_to_coord_fractions(slider, 0.75, 0.25)
-    dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 17")
+    dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 16")
     dash_dcc.move_to_coord_fractions(slider, 0.5, 0.25)
     dash_dcc.wait_for_text_to_equal("#out-drag-value", "You have dragged 11")
     dash_dcc.wait_for_text_to_equal("#out-value", "You have selected 5")