fix(s2): ensure slider respects custom widths and correct the fillOffset (#7138)

* fix(s2): ensure slider respects custom widths and correct fillOffset

* remove fieldInput from track styling

* add chromatic story replicating issue

* fix lint

Author: yihuiliao

packages/@react-spectrum/s2/chromatic/Slider.stories.tsx

@@ -68,6 +68,18 @@ FormatOptions.args = {
   formatOptions: {style: 'currency', currency: 'JPY'}
 };
 
+export const MinMaxValue = (args: any) => (
+  <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
+    <Slider {...args} />
+  </div>
+);
+
+MinMaxValue.args = {
+  label: 'Size',
+  minValue: 1,
+  maxValue: 5
+};
+
 export const ContextualHelpExample = (args: any) => (
   <div style={{display: 'flex', flexDirection: 'column', alignItems: 'start', gap: 8}}>
     <Slider {...args} />

packages/@react-spectrum/s2/src/Slider.tsx

@@ -148,7 +148,6 @@ const output = style({
 });
 
 export let track = style({
-  ...fieldInput(),
   gridArea: 'track',
   position: 'relative',
   width: 'full',
@@ -379,7 +378,7 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
               </FieldLabel>
               {labelPosition === 'top' && outputValue}
             </div>
-            <div className={style({gridArea: 'input', display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>
+            <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>
               {props.children}
               {labelPosition === 'side' && outputValue}
             </div>
@@ -416,7 +415,7 @@ function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
         className={track({size, labelPosition, isInForm: !!formContext})}>
         {({state, isDisabled}) => {
 
-          fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : 0;
+          fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);
 
           let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
           let isRightOfOffset = fillWidth > 0;