Feature #2717: dcc.DateRangeSlider and dcc.DateSlider

components/dash-core-components/src/components/DateRangeSlider.tsx

@@ -0,0 +1,42 @@
+import React, {lazy, Suspense} from 'react';
+import {PersistedProps, PersistenceTypes, DateRangeSliderProps} from '../types';
+import dateRangeSlider from '../utils/LazyLoader/dateRangeSlider';
+
+import './css/sliders.css';
+
+const RealDateRangeSlider = lazy(dateRangeSlider);
+
+/**
+ * A date range slider component.
+ * Used for specifying a range of dates with optional disabled date indicators
+ * and calendar-aware stepping.
+ */
+export default function DateRangeSlider({
+    updatemode = 'mouseup',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persisted_props = [PersistedProps.value],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persistence_type = PersistenceTypes.local,
+    // eslint-disable-next-line no-magic-numbers
+    verticalHeight = 400,
+    allow_direct_input = true,
+    disabled_dates_indicator = true,
+    ...props
+}: DateRangeSliderProps) {
+    return (
+        <Suspense fallback={null}>
+            <RealDateRangeSlider
+                updatemode={updatemode}
+                verticalHeight={verticalHeight}
+                allow_direct_input={allow_direct_input}
+                disabled_dates_indicator={disabled_dates_indicator}
+                {...props}
+            />
+        </Suspense>
+    );
+}
+
+DateRangeSlider.dashPersistence = {
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
+};

components/dash-core-components/src/components/DateSlider.tsx

@@ -0,0 +1,134 @@
+import React, {lazy, Suspense, useCallback, useMemo, useState} from 'react';
+import {omit} from 'ramda';
+import DatePickerSingle from '../components/DatePickerSingle';
+import {
+    PersistedProps,
+    PersistenceTypes,
+    DateSliderProps,
+    DateRangeSliderProps,
+} from '../types';
+import dateRangeSlider from '../utils/LazyLoader/dateRangeSlider';
+import './css/sliders.css';
+
+const RealSlider = lazy(dateRangeSlider);
+
+/**
+ * A slider component for selecting a single date.
+ * This is a wrapper around DateRangeSlider that handles date values.
+ */
+export default function DateSlider({
+    updatemode = 'mouseup',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persisted_props = [PersistedProps.value],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    persistence_type = PersistenceTypes.local,
+    // eslint-disable-next-line no-magic-numbers
+    verticalHeight = 400,
+    allow_direct_input = true,
+    setProps,
+    value,
+    drag_value,
+    id,
+    vertical = false,
+    min,
+    max,
+    display_format,
+    ...props
+}: DateSliderProps) {
+    const [resetKey, setResetKey] = useState(0);
+
+    // Convert single date value to array for DateRangeSlider
+    const mappedValue: DateRangeSliderProps['value'] = useMemo(() => {
+        return value ? [value] : value;
+    }, [value]);
+
+    // Convert single date drag value to array for DateRangeSlider
+    const mappedDragValue: DateRangeSliderProps['drag_value'] = useMemo(() => {
+        return drag_value ? [drag_value] : undefined;
+    }, [drag_value]);
+
+    const mappedSetProps: DateRangeSliderProps['setProps'] = useCallback(
+        newProps => {
+            const {value, drag_value} = newProps;
+            const mappedProps: Partial<DateSliderProps> = omit(
+                ['value', 'drag_value', 'setProps'],
+                newProps
+            );
+            if ('value' in newProps) {
+                mappedProps.value = value ? value[0] : value;
+            }
+            if ('drag_value' in newProps) {
+                mappedProps.drag_value = drag_value
+                    ? drag_value[0]
+                    : drag_value;
+            }
+            setProps(mappedProps);
+        },
+        [setProps]
+    );
+
+    const handleDateInputChange = useCallback(
+        (dateStr: `${string}-${string}-${string}` | undefined) => {
+            if (!dateStr) {
+                setProps({
+                    value:
+                        (min as `${string}-${string}-${string}`) ?? undefined,
+                });
+                return;
+            }
+            const hasNoChange = value === dateStr;
+            if (hasNoChange) {
+                setResetKey(k => k + 1);
+            } else {
+                setProps({value: dateStr});
+            }
+        },
+        [value, setProps, min]
+    );
+
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: vertical ? 'column' : 'row',
+                gap: '10px',
+            }}
+        >
+            {allow_direct_input && (
+                <DatePickerSingle
+                    key={`date-input-${resetKey}`}
+                    className="dash-range-slider-input"
+                    date={value ?? undefined}
+                    setProps={({date}) => handleDateInputChange(date)}
+                    min_date_allowed={min}
+                    max_date_allowed={max}
+                    display_format={display_format}
+                />
+            )}
+            <div style={{flex: 1, minWidth: 0}}>
+                <Suspense fallback={null}>
+                    <RealSlider
+                        key={resetKey}
+                        id={id}
+                        updatemode={updatemode}
+                        verticalHeight={verticalHeight}
+                        allow_direct_input={false}
+                        vertical={vertical}
+                        min={min}
+                        max={max}
+                        display_format={display_format}
+                        value={mappedValue}
+                        drag_value={mappedDragValue}
+                        setProps={mappedSetProps}
+                        {...props}
+                    />
+                </Suspense>
+            </div>
+        </div>
+    );
+}
+
+DateSlider.dashPersistence = {
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
+};

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

@@ -7,14 +7,14 @@
     touch-action: none;
     width: 100%;
     height: 14px;
-    padding: 17px 0 17px 0;
+    padding: 17px 0;
     box-sizing: border-box;
     /* Override Radix's default margin/padding behavior */
     --radix-slider-thumb-width: 16px;
 }
 
 .dash-slider-root.has-marks {
-    padding: 6px 0 28px 0;
+    padding: 6px 0 28px 0; 
 }
 
 .dash-slider-root[data-orientation='vertical'].has-marks {
@@ -55,7 +55,7 @@
 
 .dash-slider-thumb {
     position: relative;
-    z-index: 1;
+    z-index: 10;
     display: block;
     width: 16px;
     height: 16px;
@@ -97,6 +97,10 @@
     color: var(--Dash-Text-Strong);
     white-space: nowrap;
     pointer-events: none;
+    z-index: 10;
+    transform: translateX(
+        max(-50%, calc(0px   - var(--dash-mark-offset, 0px)))
+    );
 }
 
 .dash-slider-mark-outside-selection {
@@ -147,6 +151,7 @@
     background-color: var(--Dash-Fill-Inverse-Strong);
     user-select: none;
     z-index: 1000;
+    width: max-content;
     fill: var(--Dash-Fill-Inverse-Strong);
 }
 
@@ -195,6 +200,13 @@
     min-width: 0;
 }
 
+.dash-date-range-slider-wrapper {
+    position: relative;
+    flex: 1;
+    padding: 0 28px;
+    box-sizing: border-box;
+}
+
 .dash-range-slider-inputs {
     display: flex;
     flex-direction: column;
@@ -204,23 +216,12 @@
 
 .dash-range-slider-min-input {
     text-align: center;
+    max-width: 140px;
 }
 
 .dash-range-slider-max-input {
     order: 1;
-}
-
-.dash-range-slider-input {
-    min-width: 5cqw; /* 5% of container width */
-    max-width: 25cqw; /* 25% of container width */
-    text-align: center;
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-    appearance: textfield;
-    font-family: inherit;
-    font-size: inherit;
-    box-sizing: content-box;
-    height: 30px;
+    max-width: 140px;
 }
 
 .dash-range-slider-input:only-of-type {
@@ -259,3 +260,41 @@
         display: none;
     }
 }
+
+.dash-slider-disabled-ranges-container {
+    position: absolute;
+    inset: 0;
+    top: 10%;
+    left: 28px;
+    width: calc(100% - 56px);
+    height: 4px;
+    transform: translateX(5px);
+    pointer-events: none;
+    z-index: -1;
+}
+
+.dash-slider-disabled-ranges-container.vertical {
+    top: 0;
+    left: 8px;
+    width: 4px;
+    height: 100%;
+    transform: translateY(5px);
+}
+
+.dash-slider-disabled-range {
+    position: absolute;
+    background: repeating-linear-gradient(
+        -45deg,
+        #dc2626 0px,
+        #dc2626 2.5px,
+        transparent 2px,
+        transparent 5px
+    );
+    opacity: 1;
+    height: 100%;
+}
+
+.dash-slider-disabled-ranges-container.vertical .dash-slider-disabled-range {
+    width: 100%;
+    height: auto;
+}