fix: Pad in slider so the thumb does not render outside the bounds of the root element

apps/vr-tests-react-components/src/stories/Slider.stories.tsx

@@ -2,8 +2,10 @@ import * as React from 'react';
 import Screener, { Steps } from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
 import { Slider } from '@fluentui/react-slider';
+import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
 
 storiesOf('Slider Converged', module)
+  .addDecorator(TestWrapperDecorator)
   .addDecorator(story => (
     <Screener
       steps={new Steps()
@@ -31,3 +33,13 @@ storiesOf('Slider Converged', module)
     includeDarkMode: true,
   })
   .addStory('Disabled Vertical', () => <Slider className="test-class" disabled vertical defaultValue={30} />);
+
+storiesOf('Slider Converged', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story => (
+    <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+  ))
+  .addStory('Horizontal - 0%', () => <Slider defaultValue={0} />, { includeRtl: true })
+  .addStory('Horizontal - 100%', () => <Slider defaultValue={100} />, { includeRtl: true })
+  .addStory('Vertical - 0%', () => <Slider vertical defaultValue={0} />, { includeRtl: true })
+  .addStory('Vertical - 100%', () => <Slider vertical defaultValue={100} />, { includeRtl: true });

change/@fluentui-react-slider-d63d5490-c622-4a65-aadd-13489fb0c0b2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Pad in slider so the thumb does not render outside the bounds of the root element",
+  "packageName": "@fluentui/react-slider",
+  "email": "behowell@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-slider/src/components/Slider/useSliderStyles.ts

@@ -33,7 +33,6 @@ const useRootStyles = makeStyles({
   root: {
     position: 'relative',
     display: 'inline-grid',
-    gridTemplateAreas: '"slider"',
     touchAction: 'none',
     alignItems: 'center',
     justifyItems: 'center',
@@ -53,13 +52,16 @@ const useRootStyles = makeStyles({
 
   horizontal: {
     minWidth: '120px',
-    height: `var(${thumbSizeVar})`,
+    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
+    gridTemplateRows: `1fr var(${thumbSizeVar}) 1fr`,
+    gridTemplateColumns: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,
   },
 
   vertical: {
-    width: `var(${thumbSizeVar})`,
     minHeight: '120px',
-    gridTemplateColumns: `var(${thumbSizeVar})`,
+    // 3x3 grid with the rail and thumb in the center cell [2,2] and the hidden input stretching across all cells
+    gridTemplateRows: `1fr calc(100% - var(${thumbSizeVar})) 1fr`,
+    gridTemplateColumns: `1fr var(${thumbSizeVar}) 1fr`,
   },
 
   enabled: {
@@ -114,10 +116,10 @@ const useRailStyles = makeStyles({
   rail: {
     ...shorthands.borderRadius(tokens.borderRadiusXLarge),
     pointerEvents: 'none',
-    gridRowStart: 'slider',
-    gridRowEnd: 'slider',
-    gridColumnStart: 'slider',
-    gridColumnEnd: 'slider',
+    gridRowStart: '2',
+    gridRowEnd: '2',
+    gridColumnStart: '2',
+    gridColumnEnd: '2',
     position: 'relative',
     forcedColorAdjust: 'none',
     // Background gradient represents the progress of the slider
@@ -180,6 +182,10 @@ const useRailStyles = makeStyles({
  */
 const useThumbStyles = makeStyles({
   thumb: {
+    gridRowStart: '2',
+    gridRowEnd: '2',
+    gridColumnStart: '2',
+    gridColumnEnd: '2',
     position: 'absolute',
     width: `var(${thumbSizeVar})`,
     height: `var(${thumbSizeVar})`,
@@ -189,7 +195,6 @@ const useThumbStyles = makeStyles({
     ...shorthands.borderRadius(tokens.borderRadiusCircular),
     boxShadow: `0 0 0 calc(var(${thumbSizeVar}) * .2) ${tokens.colorNeutralBackground1} inset`,
     backgroundColor: `var(${thumbColorVar})`,
-    transform: 'translateX(-50%)',
     '::before': {
       position: 'absolute',
       top: '0px',
@@ -208,6 +213,7 @@ const useThumbStyles = makeStyles({
     },
   },
   horizontal: {
+    transform: 'translateX(-50%)',
     left: `var(${sliderProgressVar})`,
   },
   vertical: {
@@ -222,19 +228,19 @@ const useThumbStyles = makeStyles({
 const useInputStyles = makeStyles({
   input: {
     opacity: 0,
-    gridRowStart: 'slider',
-    gridRowEnd: 'slider',
-    gridColumnStart: 'slider',
-    gridColumnEnd: 'slider',
+    gridRowStart: '1',
+    gridRowEnd: '-1',
+    gridColumnStart: '1',
+    gridColumnEnd: '-1',
     ...shorthands.padding(0),
     ...shorthands.margin(0),
   },
   horizontal: {
     height: `var(${thumbSizeVar})`,
-    width: `calc(100% + var(${thumbSizeVar}))`,
+    width: '100%',
   },
   vertical: {
-    height: `calc(100% + var(${thumbSizeVar}))`,
+    height: '100%',
     width: `var(${thumbSizeVar})`,
     '-webkit-appearance': 'slider-vertical',
   },