- Default stepping value for time-slider to 1 day;

- New style on the active thumb to visually indicate that it's selected and can be moved by keyboard;
- Small style change on the label (make it a bit smaller);
- Renaming 'onValueDisplay' to 'onValueLabelFormat' to better align with 'onValueLabelFormat' that comes from Material UI and to better distinguish from 'valueLabelDisplay' (from Material UI) which has different meaning

packages/geoview-core/src/api/event-processors/event-processor-children/time-slider-event-processor.ts

@@ -166,10 +166,18 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor {
       ? [new Date(temporalDimensionInfo.default[0]).getTime(), new Date(temporalDimensionInfo.default[1]).getTime()]
       : [...minAndMax];
 
+    // If using discrete axis
+    let step: number | undefined;
+    if (nearestValues === 'discrete') {
+      // Try to guess the steps that should be used
+      step = TimeSliderEventProcessor.guessEstimatedStep(minAndMax[0], minAndMax[1]);
+    }
+
     return {
       range,
       defaultValue,
       discreteValues: nearestValues === 'discrete',
+      step,
       minAndMax,
       field,
       fieldAlias,
@@ -182,6 +190,28 @@ export class TimeSliderEventProcessor extends AbstractEventProcessor {
     };
   }
 
+  /**
+   * Guesses the estimated steps that should be used by the slider, depending on the value range
+   * @param {number} minValue - The minimum value
+   * @param {number} maxValue - The maximum value
+   * @returns The estimated stepping value based on the min and max values
+   */
+  static guessEstimatedStep(minValue: number, maxValue: number): number | undefined {
+    const day1 = 86400000; // 24h x 60m x 60s x 1000ms = 86,400,000ms in a day
+    const month1 = day1 * 30; // 2,592,000,000ms in 1 month
+    const year1 = day1 * 365; // 31,536,000,000ms in 1 year
+    const years2 = year1 * 2; // 63,072,000,000ms in 2 years
+    const years10 = year1 * 10; // 63,072,000,000ms in 2 years
+    const months2 = month1 * 2; // 315,360,000,000 in 10 years
+    const intervalDiff = maxValue - minValue;
+
+    let step: number | undefined;
+    if (intervalDiff > months2) step = day1; // Daily stepping
+    if (intervalDiff > years2) step = month1; // Monthly stepping
+    if (intervalDiff > years10) step = year1; // Yearly stepping
+    return step;
+  }
+
   /**
    * Sets the selected layer path
    * @param {string} mapId - The map id of the state to act on

packages/geoview-core/src/core/stores/store-interface-and-intial-values/time-slider-state.ts

@@ -236,6 +236,7 @@ export interface TypeTimeSliderValues {
   delay: number;
   description?: string;
   discreteValues: boolean;
+  step?: number;
   field: string;
   fieldAlias: string;
   filtering: boolean;

packages/geoview-core/src/ui/slider/slider-style.ts

@@ -23,6 +23,13 @@ export const getSxClasses = (theme: Theme): any => ({
         height: 30,
       },
     },
+    '&  .MuiSlider-thumb:hover, .MuiSlider-thumb.Mui-focusVisible': {
+      boxShadow: 'rgba(1, 0, 155, 0.7) 0px 0px 0px 3px !important',
+    },
+    '& .MuiSlider-valueLabel': {
+      fontSize: '0.7rem',
+      padding: '0.25rem 0.4rem',
+    },
     '& .MuiSlider-rail': {
       opacity: 0.35,
       color: theme.palette.geoViewColor?.grey.darken(0.9, 0.87),

packages/geoview-core/src/ui/slider/slider.tsx

@@ -26,7 +26,7 @@ type SliderProps = {
   // custom onChange callback
   onChange?: (value: number | number[], activeThumb: number) => void;
   onChangeCommitted?: (value: number | number[]) => void;
-  onValueDisplay?: (value: number, index: number) => string;
+  onValueLabelFormat?: (value: number, index: number) => string;
   onValueDisplayAriaLabel?: (value: number, index: number) => string;
 
   // MUI optional props
@@ -51,7 +51,7 @@ type SliderProps = {
  * @returns {JSX.Element} the created Slider element
  */
 export function Slider(props: SliderProps): JSX.Element {
-  const { value: parentValue, min, max, onChange, onChangeCommitted, onValueDisplay, onValueDisplayAriaLabel, ...properties } = props;
+  const { value: parentValue, min, max, onChange, onChangeCommitted, onValueLabelFormat, onValueDisplayAriaLabel, ...properties } = props;
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
@@ -199,12 +199,12 @@ export function Slider(props: SliderProps): JSX.Element {
       step={properties.step}
       size={properties.size}
       disableSwap={false}
-      valueLabelDisplay="auto"
-      onChange={handleChange}
-      onChangeCommitted={handleChangeCommitted}
-      valueLabelFormat={onValueDisplay}
+      valueLabelDisplay="on"
+      valueLabelFormat={onValueLabelFormat}
       getAriaLabel={(): string => 'To implement with translation'}
       getAriaValueText={onValueDisplayAriaLabel}
+      onChange={handleChange}
+      onChangeCommitted={handleChangeCommitted}
     />
   );
 }

packages/geoview-time-slider/src/time-slider.tsx

@@ -73,6 +73,7 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
     description,
     defaultValue,
     discreteValues,
+    step,
     range,
     minAndMax,
     field,
@@ -408,9 +409,9 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
               max={minAndMax[1]}
               value={values}
               marks={sliderMarks}
-              step={!discreteValues ? null : 0.1}
+              step={discreteValues ? step || 0.1 : null}
               onChangeCommitted={handleSliderChange}
-              onValueDisplay={handleLabelFormat}
+              onValueLabelFormat={handleLabelFormat}
             />
           </div>
         </Grid>