[Joy] Make slider displays Joy classname (#33051)

mui · Jun 15, 2022 · 81608ba · 81608ba
1 parent 94d81e8
commit 81608ba
Show file tree

Hide file tree

Showing 8 changed files with 597 additions and 183 deletions.
diff --git a/docs/data/joy/components/slider/EdgeLabelSlider.js b/docs/data/joy/components/slider/EdgeLabelSlider.js
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Slider, { sliderClasses } from '@mui/joy/Slider';
+
+function valueText(value) {
+  return `${value}°C`;
+}
+
+export default function EdgeLabelSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <Slider
+        track={false}
+        defaultValue={[0, 100]}
+        getAriaLabel={() => 'Amount'}
+        getAriaValueText={valueText}
+        marks={[
+          {
+            value: 0,
+            label: '0°C',
+          },
+          {
+            value: 100,
+            label: '100°C',
+          },
+        ]}
+        valueLabelDisplay="on"
+        sx={{
+          // Need both of the selectors to make it works on the server-side and client-side
+          [`& [style*="left:0%"], & [style*="left: 0%"]`]: {
+            [`&.${sliderClasses.markLabel}`]: {
+              transform: 'none',
+            },
+            [`& .${sliderClasses.valueLabel}`]: {
+              left: 'calc(var(--Slider-thumb-size) / 2 - 2px)', // 2px is the thumb border width
+              borderBottomLeftRadius: 0,
+              '&::before': {
+                left: 0,
+                transform: 'translateY(100%)',
+                borderLeftColor: 'currentColor',
+              },
+            },
+          },
+          [`& [style*="left:100%"], & [style*="left: 100%"]`]: {
+            [`&.${sliderClasses.markLabel}`]: {
+              transform: 'translateX(-100%)',
+            },
+            [`& .${sliderClasses.valueLabel}`]: {
+              right: 'calc(var(--Slider-thumb-size) / 2 - 2px)', // 2px is the thumb border width
+              borderBottomRightRadius: 0,
+              '&::before': {
+                left: 'initial',
+                right: 0,
+                transform: 'translateY(100%)',
+                borderRightColor: 'currentColor',
+              },
+            },
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/slider/EdgeLabelSlider.tsx b/docs/data/joy/components/slider/EdgeLabelSlider.tsx
@@ -0,0 +1,63 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Slider, { sliderClasses } from '@mui/joy/Slider';
+
+function valueText(value: number) {
+  return `${value}°C`;
+}
+
+export default function EdgeLabelSlider() {
+  return (
+    <Box sx={{ width: 300 }}>
+      <Slider
+        track={false}
+        defaultValue={[0, 100]}
+        getAriaLabel={() => 'Amount'}
+        getAriaValueText={valueText}
+        marks={[
+          {
+            value: 0,
+            label: '0°C',
+          },
+          {
+            value: 100,
+            label: '100°C',
+          },
+        ]}
+        valueLabelDisplay="on"
+        sx={{
+          // Need both of the selectors to make it works on the server-side and client-side
+          [`& [style*="left:0%"], & [style*="left: 0%"]`]: {
+            [`&.${sliderClasses.markLabel}`]: {
+              transform: 'none',
+            },
+            [`& .${sliderClasses.valueLabel}`]: {
+              left: 'calc(var(--Slider-thumb-size) / 2 - 2px)', // 2px is the thumb border width
+              borderBottomLeftRadius: 0,
+              '&::before': {
+                left: 0,
+                transform: 'translateY(100%)',
+                borderLeftColor: 'currentColor',
+              },
+            },
+          },
+          [`& [style*="left:100%"], & [style*="left: 100%"]`]: {
+            [`&.${sliderClasses.markLabel}`]: {
+              transform: 'translateX(-100%)',
+            },
+            [`& .${sliderClasses.valueLabel}`]: {
+              right: 'calc(var(--Slider-thumb-size) / 2 - 2px)', // 2px is the thumb border width
+              borderBottomRightRadius: 0,
+              '&::before': {
+                left: 'initial',
+                right: 0,
+                transform: 'translateY(100%)',
+                borderRightColor: 'currentColor',
+              },
+            },
+          },
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/slider/slider.md b/docs/data/joy/components/slider/slider.md
@@ -31,6 +31,12 @@ You can force the thumb label to be always visible with `valueLabelDisplay="on"`
 
 {{"demo": "AlwaysVisibleLabelSlider.js"}}
 
+### Keep label at edges
+
+For horizontal slider on mobile viewports, the value label might be offset from the track. Apply the style to keep the label at the start/end edges:
+
+{{"demo": "EdgeLabelSlider.js"}}
+
 ## Range slider
 
 By passing an array of values to the `value` prop, you can use the `Slider` to set the start and end of a range.

diff --git a/packages/mui-base/src/SliderUnstyled/useSlider.ts b/packages/mui-base/src/SliderUnstyled/useSlider.ts
@@ -681,14 +681,14 @@ export default function useSlider(parameters: UseSliderParameters) {
 
   return {
     active,
-    axis,
+    axis: axis as keyof typeof axisProps,
     axisProps,
     dragging,
     focusVisible,
     getHiddenInputProps,
     getRootProps,
     getThumbProps,
-    marks,
+    marks: marks as Mark[],
     open,
     range,
     trackLeap,