feat(Slider): make thumb position clearer when the value is set near …

…the edge
microsoft · Jul 18, 2024 · 4640038 · 4640038
1 parent b147de9
commit 4640038
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/change/@fluentui-react-slider-2fad34fd-35cd-408f-b940-e8d8b1e0c817.json b/change/@fluentui-react-slider-2fad34fd-35cd-408f-b940-e8d8b1e0c817.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(Slider): make thumb position clearer when the value is set near edge",
+  "packageName": "@fluentui/react-slider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx b/packages/react-components/react-slider/library/src/components/Slider/useSliderState.tsx
@@ -4,7 +4,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
 import { sliderCSSVars } from './useSliderStyles.styles';
 import type { SliderState, SliderProps } from './Slider.types';
 
-const { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar } = sliderCSSVars;
+const { sliderStepsPercentVar, sliderProgressVar, sliderDirectionVar, sliderThumbOffsetRatio } = sliderCSSVars;
 
 const getPercent = (value: number, min: number, max: number) => {
   return max === min ? 0 : ((value - min) / (max - min)) * 100;
@@ -22,6 +22,7 @@ export const useSliderState_unstable = (state: SliderState, props: SliderProps)
   });
   const clampedValue = clamp(currentValue, min, max);
   const valuePercent = getPercent(clampedValue, min, max);
+  const thumbOffsetRatio = 0.5 - (valuePercent / 100);
 
   const inputOnChange = state.input.onChange;
   const propsOnChange = props.onChange;
@@ -41,6 +42,7 @@ export const useSliderState_unstable = (state: SliderState, props: SliderProps)
     [sliderDirectionVar]: state.vertical ? '0deg' : dir === 'ltr' ? '90deg' : '270deg',
     [sliderStepsPercentVar]: step && step > 0 ? `${(step * 100) / (max - min)}%` : '',
     [sliderProgressVar]: `${valuePercent}%`,
+    [sliderThumbOffsetRatio]: thumbOffsetRatio,
   };
 
   // Root props

diff --git a/...ges/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts b/...ges/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts
@@ -22,9 +22,10 @@ export const sliderCSSVars = {
   sliderDirectionVar: `--fui-Slider--direction`,
   sliderProgressVar: `--fui-Slider--progress`,
   sliderStepsPercentVar: `--fui-Slider--steps-percent`,
+  sliderThumbOffsetRatio: `--fui-Slider__thumb--offset-ratio`,
 };
 
-const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;
+const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar, sliderThumbOffsetRatio } = sliderCSSVars;
 
 /**
  * Styles for the root slot
@@ -214,11 +215,11 @@ const useThumbStyles = makeStyles({
   },
   horizontal: {
     transform: 'translateX(-50%)',
-    left: `var(${sliderProgressVar})`,
+    left: `calc(var(${sliderProgressVar}) + var(${sliderThumbOffsetRatio}) * var(${thumbSizeVar}))`,
   },
   vertical: {
     transform: 'translateY(50%)',
-    bottom: `var(${sliderProgressVar})`,
+    bottom: `calc(var(${sliderProgressVar}) + var(${sliderThumbOffsetRatio}) * var(${thumbSizeVar}))`,
   },
 });