[Slider] Fix ValueLabel UI issues comes when size="small" and orienta…

…tion="vertical (#36738)
mui · Apr 4, 2023 · 17ca698 · 17ca698
1 parent 62907aa
commit 17ca698
Showing 1 changed file with 10 additions and 6 deletions.
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
@@ -302,7 +302,9 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   overridesResolver: (props, styles) => styles.valueLabel,
 })(({ theme, ownerState }) => ({
   [`&.${sliderClasses.valueLabelOpen}`]: {
-    transform: 'translateY(-100%) scale(1)',
+    transform: `${
+      ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'
+    } scale(1)`,
   },
   zIndex: 1,
   whiteSpace: 'nowrap',
@@ -311,7 +313,9 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
   transition: theme.transitions.create(['transform'], {
     duration: theme.transitions.duration.shortest,
   }),
-  transform: 'translateY(-100%) scale(0)',
+  transform: `${
+    ownerState.orientation === 'vertical' ? 'translateY(-50%)' : 'translateY(-100%)'
+  } scale(0)`,
   position: 'absolute',
   backgroundColor: (theme.vars || theme).palette.grey[600],
   borderRadius: 2,
@@ -335,18 +339,18 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
     },
   }),
   ...(ownerState.orientation === 'vertical' && {
-    right: '30px',
-    top: '24px',
+    right: ownerState.size === 'small' ? '20px' : '30px',
+    top: '50%',
     transformOrigin: 'right center',
     '&:before': {
       position: 'absolute',
       content: '""',
       width: 8,
       height: 8,
-      transform: 'translate(-50%, 50%) rotate(45deg)',
+      transform: 'translate(-50%, -50%) rotate(45deg)',
       backgroundColor: 'inherit',
       right: '-20%',
-      top: '25%',
+      top: '50%',
     },
   }),
   ...(ownerState.size === 'small' && {