diff --git a/packages/@adobe/spectrum-css-temp/components/slider/index.css b/packages/@adobe/spectrum-css-temp/components/slider/index.css
index 0e80856523a..c00df59c627 100644
--- a/packages/@adobe/spectrum-css-temp/components/slider/index.css
+++ b/packages/@adobe/spectrum-css-temp/components/slider/index.css
@@ -56,6 +56,43 @@ governing permissions and limitations under the License.
 
   user-select: none;
   touch-action: none;
+
+  width: var(--spectrum-global-dimension-size-2400);
+  min-inline-size: var(--spectrum-slider-min-width);
+
+
+  &.spectrum-Slider--positionTop {
+    display: inline-flex;
+    flex-direction: column;
+    width: var(--spectrum-component-single-line-width);
+
+    .spectrum-Slider-controls {
+      /* If the user overrides the width of the field, propagate to the inner component */
+      width: calc(100% - calc(var(--spectrum-slider-controls-margin)) * 2);
+    }
+  }
+
+  /* The side label variant of Field is inline, and fills as much space as needed
+   * by default. If an explicit width is set, then the field flexes to fill available space. */
+  &.spectrum-Slider--positionSide {
+    display: inline-flex;
+    align-items: center;
+    width: auto;
+
+
+    .spectrum-Slider-controls {
+      flex: 1;
+      width: var(--spectrum-component-single-line-width);
+    }
+    .spectrum-Slider-labelContainer {
+      margin-inline-end: calc(var(--spectrum-slider-label-gap-x) / 2);
+    }
+
+    .spectrum-Slider-value {
+      text-align: start;
+    }
+
+  }
 }
 
 .spectrum-Slider-controls {
@@ -66,10 +103,9 @@ governing permissions and limitations under the License.
   z-index: auto;
 
   min-block-size: var(--spectrum-slider-height);
-  min-inline-size: var(--spectrum-slider-min-width);
 
   /* These calculations prevent the track from spilling outside of the control */
-  inline-size: calc(100% - calc(var(--spectrum-slider-controls-margin) * 2));
+  inline-size: calc(100% - calc(var(--spectrum-slider-controls-margin)));
   margin-inline-start: var(--spectrum-slider-controls-margin);
   min-block-size: var(--spectrum-slider-height);
 
@@ -304,7 +340,6 @@ governing permissions and limitations under the License.
 
   inline-size: auto;
 
-  padding-block-start: var(--spectrum-fieldlabel-padding-top);
 
   font-size: var(--spectrum-text-size-text-label);
   line-height: var(--spectrum-line-height-text-label);
diff --git a/packages/@react-spectrum/slider/src/RangeSlider.tsx b/packages/@react-spectrum/slider/src/RangeSlider.tsx
index b89e8cc30d9..4e8c29abe4a 100644
--- a/packages/@react-spectrum/slider/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/slider/src/RangeSlider.tsx
@@ -44,7 +44,6 @@ function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivE
     <SliderBase {...baseProps} classes={'spectrum-Slider--range'} ref={ref}>
       {({trackRef, inputRef, state}: SliderBaseChildArguments) => {
         let cssDirection = direction === 'rtl' ? 'right' : 'left';
-
         return (
           <>
             <div
@@ -72,7 +71,6 @@ function RangeSlider(props: SpectrumRangeSliderProps, ref: FocusableRef<HTMLDivE
             <div
               className={classNames(styles, 'spectrum-Slider-track')}
               style={{
-                [cssDirection]: `${state.getThumbPercent(1) * 100}%`,
                 width: `${(1 - state.getThumbPercent(1)) * 100}%`
               }} />
           </>
diff --git a/packages/@react-spectrum/slider/src/SliderBase.tsx b/packages/@react-spectrum/slider/src/SliderBase.tsx
index 842e0876182..dbb44fcd017 100644
--- a/packages/@react-spectrum/slider/src/SliderBase.tsx
+++ b/packages/@react-spectrum/slider/src/SliderBase.tsx
@@ -127,7 +127,8 @@ function SliderBase(props: SliderBaseProps, ref: FocusableRef<HTMLDivElement>) {
       className={classNames(styles,
         'spectrum-Slider',
         {
-          'spectrum-Slider--label-side': labelPosition === 'side',
+          'spectrum-Slider--positionTop': labelPosition === 'top',
+          'spectrum-Slider--positionSide': labelPosition === 'side',
           'is-disabled': isDisabled
         },
         classes,
diff --git a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
index abb99583a52..93b05945d21 100644
--- a/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
+++ b/packages/@react-spectrum/slider/stories/RangeSlider.stories.tsx
@@ -41,7 +41,7 @@ storiesOf('Slider/RangeSlider', module)
   )
   .add(
     'label overflow',
-    () => render({label: 'This is a rather long label for this narrow slider element.', maxValue: 1000, width: '100px'})
+    () => render({label: 'This is a rather long label for this narrow slider element.', maxValue: 1000, width: '300px'})
   )
   .add(
     'showValueLabel: false',
diff --git a/packages/@react-spectrum/slider/stories/Slider.stories.tsx b/packages/@react-spectrum/slider/stories/Slider.stories.tsx
index 23be159da7d..5ba64ee5631 100644
--- a/packages/@react-spectrum/slider/stories/Slider.stories.tsx
+++ b/packages/@react-spectrum/slider/stories/Slider.stories.tsx
@@ -45,11 +45,15 @@ storiesOf('Slider', module)
   )
   .add(
     'custom width',
-    () => render({label: 'Label', width: '200px'})
+    () => render({label: 'Label', width: '300px'})
+  )
+  .add(
+    'custom width small',
+    () => render({label: 'Label', width: '30px'})
   )
   .add(
     'label overflow',
-    () => render({label: 'This is a rather long label for this narrow slider element.', maxValue: 1000, width: '100px'})
+    () => render({label: 'This is a rather long label for this narrow slider element.', maxValue: 1000, width: '300px'})
   )
   .add(
     'showValueLabel: false',
@@ -75,6 +79,14 @@ storiesOf('Slider', module)
     'labelPosition: side',
     () => render({label: 'Label', labelPosition: 'side'})
   )
+  .add(
+    'labelPosition: side, customWidth',
+    () => render({label: 'Label', labelPosition: 'side', width: '400px'})
+  )
+  .add(
+    'labelPosition: side, customWidth small',
+    () => render({label: 'Label', labelPosition: 'side', width: '30px'})
+  )
   .add(
     'min/max',
     () => render({label: 'Label', minValue: 30, maxValue: 70})
diff --git a/packages/@react-spectrum/textfield/stories/Textfield.stories.js b/packages/@react-spectrum/textfield/stories/Textfield.stories.js
index 073e0c1de46..aab95c01588 100644
--- a/packages/@react-spectrum/textfield/stories/Textfield.stories.js
+++ b/packages/@react-spectrum/textfield/stories/Textfield.stories.js
@@ -109,11 +109,17 @@ storiesOf('TextField', module)
   .add('custom width',
     () => render({icon: <Info />, validationState: 'invalid', width: '300px'})
   )
+  .add('custom width small',
+    () => render({icon: <Info />, validationState: 'invalid', width: '30px'})
+  )
   .add('custom width, quiet',
     () => render({icon: <Info />, validationState: 'invalid', width: '300px', isQuiet: true})
   )
   .add('custom width, labelPosition: side',
     () => render({icon: <Info />, validationState: 'invalid', width: '500px', labelPosition: 'side'})
+  )
+  .add('custom width small, labelPosition: side',
+    () => render({icon: <Info />, validationState: 'invalid', width: '30px', labelPosition: 'side'})
   );
 
 function render(props = {}) {