- 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/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

@@ -57,6 +57,9 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const playIntervalRef = useRef<number>();
 
+  // Defautl stepping value (1 day)
+  const defaultStepValue = 86400000; // 24h x 60m x 60s x 1000ms = 86,400,000ms
+
   // References for play button
   const sliderValueRef = useRef<number>();
   const sliderDeltaRef = useRef<number>();
@@ -408,9 +411,9 @@ export function TimeSlider(props: TimeSliderProps): JSX.Element {
               max={minAndMax[1]}
               value={values}
               marks={sliderMarks}
-              step={!discreteValues ? null : 0.1}
+              step={!discreteValues ? defaultStepValue : 0.1}
               onChangeCommitted={handleSliderChange}
-              onValueDisplay={handleLabelFormat}
+              onValueLabelFormat={handleLabelFormat}
             />
           </div>
         </Grid>