diff --git a/projects/mercury/src/metadata/views/facets/NumericalRangeSelectionFacet.js b/projects/mercury/src/metadata/views/facets/NumericalRangeSelectionFacet.js
index 19590fb5c..0fe57f1c4 100644
--- a/projects/mercury/src/metadata/views/facets/NumericalRangeSelectionFacet.js
+++ b/projects/mercury/src/metadata/views/facets/NumericalRangeSelectionFacet.js
@@ -2,13 +2,39 @@ import React, {useState} from 'react';
import useDeepCompareEffect from 'use-deep-compare-effect';
import Grid from '@mui/material/Grid';
import Input from '@mui/material/Input';
-import Slider from '@mui/material/Slider';
-import {Typography} from '@mui/material';
+import Slider, {SliderValueLabelProps} from '@mui/material/Slider';
+import {Tooltip, Typography} from '@mui/material';
import type {MetadataViewFacetProperties} from '../MetadataViewFacetFactory';
import {isNonEmptyValue} from '../../../common/utils/genericUtils';
const nonEmptyNumber = (value, alternative) => (isNonEmptyValue(value) ? Number(value) : alternative);
+const ValueLabelComponent = (props: SliderValueLabelProps) => {
+ const {children, value} = props;
+
+ return (
+
+ {children}
+
+ );
+};
+
const NumericalRangeSelectionFacet = (props: MetadataViewFacetProperties) => {
const {options = [], onChange = () => {}, activeFilterValues, classes} = props;
const minValue = nonEmptyNumber(options[0], null);
@@ -100,21 +126,23 @@ const NumericalRangeSelectionFacet = (props: MetadataViewFacetProperties) => {
};
const renderInput = (inputValue, onInputChange, placeholder) => (
-
+
+
+
);
const getSliderValue = () => {
@@ -136,6 +164,9 @@ const NumericalRangeSelectionFacet = (props: MetadataViewFacetProperties) => {
onChange={handleSliderChange}
onChangeCommitted={() => commitChange(dynamicSliderValue)}
valueLabelDisplay="auto"
+ slots={{
+ valueLabel: ValueLabelComponent
+ }}
aria-labelledby="range-slider"
getAriaValueText={() => dynamicSliderValue}
min={minValue}