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,85 @@
+import {omit} from 'ramda';
+import React, {lazy, Suspense, useCallback, useMemo} from 'react';
+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,
+    ...props
+}: DateSliderProps) {
+    // Convert single date value to array for DateRangeSlider
+    const mappedValue: DateRangeSliderProps['value'] = useMemo(() => {
+        return typeof value === 'string' ? [value] : value;
+    }, [value]);
+
+    // Convert single date drag value to array for DateRangeSlider
+    const mappedDragValue: DateRangeSliderProps['drag_value'] = useMemo(() => {
+        return typeof drag_value === 'string' ? [drag_value] : drag_value;
+    }, [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]
+    );
+
+    return (
+        <Suspense fallback={null}>
+            <RealSlider
+                id={id}
+                updatemode={updatemode}
+                verticalHeight={verticalHeight}
+                allow_direct_input={allow_direct_input}
+                vertical={vertical}
+                value={mappedValue}
+                drag_value={mappedDragValue}
+                setProps={mappedSetProps}
+                {...props}
+            />
+        </Suspense>
+    );
+}
+
+DateSlider.dashPersistence = {
+    persisted_props: [PersistedProps.value],
+    persistence_type: PersistenceTypes.local,
+};

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

@@ -55,7 +55,7 @@
 
 .dash-slider-thumb {
     position: relative;
-    z-index: 1;
+    z-index: 10;
     display: block;
     width: 16px;
     height: 16px;
@@ -97,6 +97,7 @@
     color: var(--Dash-Text-Strong);
     white-space: nowrap;
     pointer-events: none;
+    z-index: 10;
 }
 
 .dash-slider-mark-outside-selection {
@@ -147,6 +148,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 +197,11 @@
     min-width: 0;
 }
 
+.dash-date-range-slider-wrapper {
+    position: relative;
+    flex: 1;
+}
+
 .dash-range-slider-inputs {
     display: flex;
     flex-direction: column;
@@ -204,23 +211,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 +255,41 @@
         display: none;
     }
 }
+
+.dash-slider-disabled-ranges-container {
+    position: absolute;
+    inset: 0;
+    top: 10%;
+    left: 0;
+    width: 100%;
+    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;
+}