diff --git a/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx b/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx index 7bce227c58f..1112ef4a2b4 100644 --- a/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx +++ b/packages/@react-spectrum/s2/chromatic/Slider.stories.tsx @@ -68,6 +68,18 @@ FormatOptions.args = { formatOptions: {style: 'currency', currency: 'JPY'} }; +export const MinMaxValue = (args: any) => ( +
+ +
+); + +MinMaxValue.args = { + label: 'Size', + minValue: 1, + maxValue: 5 +}; + export const ContextualHelpExample = (args: any) => (
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx index 27fa83b2ebb..f3e9277fc9a 100644 --- a/packages/@react-spectrum/s2/src/Slider.tsx +++ b/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(props: SliderBaseProps {labelPosition === 'top' && outputValue}
-
+
{props.children} {labelPosition === 'side' && outputValue}
@@ -416,7 +415,7 @@ function Slider(props: SliderProps, ref: FocusableRef) { 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;