[Slider][base] Improve logic for displaying value label

docs/data/base/components/slider/DiscreteSlider.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { styled, alpha, Box } from '@mui/system';
 import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';
 
@@ -109,7 +110,7 @@ const StyledSlider = styled(SliderUnstyled)(
     background-color: #fff;
   }
 
-  & .${sliderUnstyledClasses.valueLabel} {
+  & .valueLabel {
     font-family: IBM Plex Sans;
     font-size: 14px;
     display: block;
@@ -121,6 +122,14 @@ const StyledSlider = styled(SliderUnstyled)(
 `,
 );
 
+function SliderValueLabel({ children }) {
+  return <span className="valueLabel">{children}</span>;
+}
+
+SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
 function valuetext(value) {
   return `${value}°C`;
 }
@@ -132,11 +141,11 @@ export default function DiscreteSlider() {
         aria-label="Temperature"
         defaultValue={30}
         getAriaValueText={valuetext}
-        valueLabelDisplay="auto"
         step={10}
         marks
         min={10}
         max={110}
+        slots={{ valueLabel: SliderValueLabel }}
       />
     </Box>
   );

docs/data/base/components/slider/DiscreteSlider.tsx

@@ -109,7 +109,7 @@ const StyledSlider = styled(SliderUnstyled)(
     background-color: #fff;
   }
 
-  & .${sliderUnstyledClasses.valueLabel} {
+  & .valueLabel {
     font-family: IBM Plex Sans;
     font-size: 14px;
     display: block;
@@ -121,6 +121,14 @@ const StyledSlider = styled(SliderUnstyled)(
 `,
 );
 
+interface SliderValueLabelProps {
+  children: React.ReactElement;
+}
+
+function SliderValueLabel({ children }: SliderValueLabelProps) {
+  return <span className="valueLabel">{children}</span>;
+}
+
 function valuetext(value: number) {
   return `${value}°C`;
 }
@@ -132,11 +140,11 @@ export default function DiscreteSlider() {
         aria-label="Temperature"
         defaultValue={30}
         getAriaValueText={valuetext}
-        valueLabelDisplay="auto"
         step={10}
         marks
         min={10}
         max={110}
+        slots={{ valueLabel: SliderValueLabel }}
       />
     </Box>
   );

docs/data/base/components/slider/DiscreteSlider.tsx.preview

@@ -2,9 +2,9 @@
   aria-label="Temperature"
   defaultValue={30}
   getAriaValueText={valuetext}
-  valueLabelDisplay="auto"
   step={10}
   marks
   min={10}
   max={110}
+  slots={{ valueLabel: SliderValueLabel }}
 />

docs/data/base/components/slider/DiscreteSliderMarks.js

@@ -109,16 +109,6 @@ const StyledSlider = styled(SliderUnstyled)(
     background-color: #fff;
   }
 
-  & .${sliderUnstyledClasses.valueLabel} {
-    font-family: IBM Plex Sans;
-    font-size: 14px;
-    display: block;
-    position: relative;
-    top: -1.6em;
-    text-align: center;
-    transform: translateX(-50%);
-  }
-
   & .${sliderUnstyledClasses.markLabel} {
     font-family: IBM Plex Sans;
     font-size: 12px;

docs/data/base/components/slider/DiscreteSliderMarks.tsx

@@ -109,16 +109,6 @@ const StyledSlider = styled(SliderUnstyled)(
     background-color: #fff;
   }
 
-  & .${sliderUnstyledClasses.valueLabel} {
-    font-family: IBM Plex Sans;
-    font-size: 14px;
-    display: block;
-    position: relative;
-    top: -1.6em;
-    text-align: center;
-    transform: translateX(-50%);
-  }
-
   & .${sliderUnstyledClasses.markLabel} {
     font-family: IBM Plex Sans;
     font-size: 12px;

docs/data/base/components/slider/DiscreteSliderValues.js

@@ -109,16 +109,6 @@ const StyledSlider = styled(SliderUnstyled)(
     background-color: #fff;
   }
 
-  & .${sliderUnstyledClasses.valueLabel} {
-    font-family: IBM Plex Sans;
-    font-size: 14px;
-    display: block;
-    position: relative;
-    top: -1.6em;
-    text-align: center;
-    transform: translateX(-50%);
-  }
-
   & .${sliderUnstyledClasses.markLabel} {
     font-family: IBM Plex Sans;
     font-size: 12px;

docs/data/base/components/slider/DiscreteSliderValues.tsx

@@ -109,16 +109,6 @@ const StyledSlider = styled(SliderUnstyled)(
     background-color: #fff;
   }
 
-  & .${sliderUnstyledClasses.valueLabel} {
-    font-family: IBM Plex Sans;
-    font-size: 14px;
-    display: block;
-    position: relative;
-    top: -1.6em;
-    text-align: center;
-    transform: translateX(-50%);
-  }
-
   & .${sliderUnstyledClasses.markLabel} {
     font-family: IBM Plex Sans;
     font-size: 12px;

docs/data/base/components/slider/RangeSlider.js

@@ -108,16 +108,6 @@ const StyledSlider = styled(SliderUnstyled)(
   & .${sliderUnstyledClasses.markActive} {
     background-color: #fff;
   }
-
-  & .${sliderUnstyledClasses.valueLabel} {
-    font-family: IBM Plex Sans;
-    font-size: 14px;
-    display: block;
-    position: relative;
-    top: -1.6em;
-    text-align: center;
-    transform: translateX(-50%);
-  }
 `,
 );
 

docs/data/base/components/slider/RangeSlider.tsx

@@ -108,16 +108,6 @@ const StyledSlider = styled(SliderUnstyled)(
   & .${sliderUnstyledClasses.markActive} {
     background-color: #fff;
   }
-
-  & .${sliderUnstyledClasses.valueLabel} {
-    font-family: IBM Plex Sans;
-    font-size: 14px;
-    display: block;
-    position: relative;
-    top: -1.6em;
-    text-align: center;
-    transform: translateX(-50%);
-  }
 `,
 );
 

docs/data/base/components/slider/UnstyledSliderValueLabel.js

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled, alpha, Box } from '@mui/system';
+import SliderUnstyled, { sliderUnstyledClasses } from '@mui/base/SliderUnstyled';
+
+const blue = {
+  100: '#DAECFF',
+  200: '#99CCF3',
+  400: '#3399FF',
+  300: '#66B2FF',
+  500: '#007FFF',
+  600: '#0072E5',
+  900: '#003A75',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const StyledSlider = styled(SliderUnstyled)(
+  ({ theme }) => `
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  height: 6px;
+  width: 100%;
+  padding: 16px 0;
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  touch-action: none;
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  &.${sliderUnstyledClasses.disabled} { 
+    pointer-events: none;
+    cursor: default;
+    color: ${theme.palette.mode === 'light' ? grey[300] : grey[600]};
+    opacity: 0.5;
+  }
+
+  & .${sliderUnstyledClasses.rail} {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    border-radius: 2px;
+    background-color: currentColor;
+    opacity: 0.4;
+  }
+
+  & .${sliderUnstyledClasses.track} {
+    display: block;
+    position: absolute;
+    height: 4px;
+    border-radius: 2px;
+    background-color: currentColor;
+  }
+
+  & .${sliderUnstyledClasses.thumb} {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    margin-left: -6px;
+    margin-top: -6px;
+    box-sizing: border-box;
+    border-radius: 50%;
+    outline: 0;
+    border: 3px solid currentColor;
+    background-color: #fff;
+
+    :hover,
+    &.${sliderUnstyledClasses.focusVisible} {
+      box-shadow: 0 0 0 0.25rem ${alpha(
+        theme.palette.mode === 'light' ? blue[400] : blue[300],
+        0.15,
+      )};
+    }
+
+    & .label {
+        background: unset;
+        background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+        width: 32px;
+        height: 32px;
+        padding: 0px;
+        visibility: hidden;
+        color: #fff;
+        border-radius: 50% 50% 50% 0;
+        position: absolute;
+        transform: translate(-35%, -140%) rotate(-45deg) scale(0);
+        transition: transform 0.3s ease;
+    }
+
+    :hover .label {
+        visibility: visible;
+        transform: translate(-35%, -140%) rotate(-45deg) scale(1);
+    }
+
+    :hover .value {
+        transform: rotate(45deg);
+        text-align: center;
+        line-height: 1.8
+    }
+
+    &.${sliderUnstyledClasses.active} {
+      box-shadow: 0 0 0 0.25rem ${alpha(
+        theme.palette.mode === 'light' ? blue[200] : blue[300],
+        0.3,
+      )};
+    }
+  }
+`,
+);
+
+function SliderValueLabel({ children }) {
+  return (
+    <span className="label">
+      <div className="value">{children}</div>
+    </span>
+  );
+}
+
+SliderValueLabel.propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+export default function UnstyledSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <StyledSlider defaultValue={10} slots={{ valueLabel: SliderValueLabel }} />
+    </Box>
+  );
+}