code · pull · May 11, 2026 · May 11, 2026 · May 11, 2026 · May 11, 2026
diff --git a/packages/@adobe/react-spectrum/src/card/CardBase.tsx b/packages/@adobe/react-spectrum/src/card/CardBase.tsx
@@ -124,8 +124,8 @@ export const CardBase = React.forwardRef(function CardBase<T extends object>(
       heading: {UNSAFE_className: classNames(styles, 'spectrum-Card-heading'), ...titleProps},
       content: {UNSAFE_className: classNames(styles, 'spectrum-Card-content'), ...contentProps},
       detail: {UNSAFE_className: classNames(styles, 'spectrum-Card-detail')}
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [titleProps, contentProps, height, isQuiet, orientation]
   );
 

diff --git a/packages/@adobe/react-spectrum/src/dialog/Dialog.tsx b/packages/@adobe/react-spectrum/src/dialog/Dialog.tsx
@@ -104,8 +104,8 @@ export const Dialog = React.forwardRef(function Dialog(props: SpectrumDialogProp
         }),
         align: 'end'
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [hasFooter, hasHeader, titleProps]
   );
 

diff --git a/packages/@adobe/react-spectrum/stories/combobox/ComboBox.stories.tsx b/packages/@adobe/react-spectrum/stories/combobox/ComboBox.stories.tsx
@@ -747,9 +747,10 @@ let customFilterItems = [
 let CustomFilterComboBox = props => {
   let {startsWith} = useFilter({sensitivity: 'base'});
   let [filterValue, setFilterValue] = React.useState('');
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+
   let filteredItems = React.useMemo(
     () => customFilterItems.filter(item => startsWith(item.name, filterValue)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.items, filterValue, startsWith]
   );
 

diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx
@@ -11,7 +11,6 @@
  */
 
 import {ContextValue} from 'react-aria-components/slots';
-
 import {createContext, forwardRef, useContext, useRef} from 'react';
 import {
   filledTrack,
@@ -25,12 +24,11 @@ import {
 } from './Slider';
 import {FocusableRef, FocusableRefValue, RangeValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
-import intlMessages from '../intl/*.json';
 // @ts-ignore
+import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
-import {SliderThumb, SliderTrack} from 'react-aria-components/Slider';
+import {SliderFill, SliderThumb, SliderTrack} from 'react-aria-components/Slider';
 import {useFocusableRef} from './useDOMRef';
-import {useLocale} from 'react-aria/I18nProvider';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -77,8 +75,6 @@ export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(
   let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0
   let domRef = useFocusableRef(ref, inputRef);
 
-  let {direction} = useLocale();
-  let cssDirection = direction === 'rtl' ? 'right' : 'left';
   let defaultThumbValues: number[] | undefined = undefined;
   if (props.defaultValue != null) {
     defaultThumbValues = [props.defaultValue.start, props.defaultValue.end];
@@ -98,14 +94,9 @@ export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(
       <SliderTrack className={track({size, labelPosition, isInForm: !!formContext})}>
         {({state, isDisabled}) => (
           <>
-            <div className={upperTrack({isDisabled, trackStyle})} />
-            <div
-              style={{
-                width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`,
-                [cssDirection]: `${state.getThumbPercent(0) * 100}%`
-              }}
-              className={filledTrack({isDisabled, isEmphasized, trackStyle})}
-            />
+            <div className={upperTrack({isDisabled, trackStyle})}>
+              <SliderFill className={filledTrack({isDisabled, isEmphasized, trackStyle})} />
+            </div>
             <SliderThumb
               className={thumbContainer}
               index={0}

diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -13,13 +13,12 @@
 import {
   Slider as AriaSlider,
   SliderProps as AriaSliderProps,
+  SliderFill,
   SliderOutput,
   SliderThumb,
   SliderThumbRenderProps,
   SliderTrack
 } from 'react-aria-components/Slider';
-
-import {clamp} from 'react-stately/private/utils/number';
 import {ContextValue} from 'react-aria-components/slots';
 import {
   controlFont,
@@ -43,7 +42,6 @@ import {mergeStyles} from '../style/runtime';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
-import {useNumberFormatter} from 'react-aria/useNumberFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface SliderBaseProps<T>
@@ -318,9 +316,10 @@ export let upperTrack = style<{
   translateY: '-50%',
   width: 'full',
   boxSizing: 'border-box',
-  borderStyle: 'solid',
-  borderWidth: '[.5px]',
-  borderColor: {
+  outlineStyle: 'solid',
+  outlineWidth: '[.5px]',
+  outlineOffset: -0.5,
+  outlineColor: {
     default: 'transparent',
     forcedColors: {
       default: 'ButtonText',
@@ -369,10 +368,8 @@ export function SliderBase<T extends number | number[]>(
     labelAlign = 'start',
     size = 'M',
     minValue = 0,
-    maxValue = 100,
-    formatOptions
+    maxValue = 100
   } = props;
-  let formatter = useNumberFormatter(formatOptions);
   let {direction} = useLocale();
 
   return (
@@ -387,26 +384,19 @@ export function SliderBase<T extends number | number[]>(
         )
       }>
       {({state}) => {
-        let maxLabelLength = Math.max(
-          [...formatter.format(minValue)].length,
-          [...formatter.format(maxValue)].length
-        );
+        let maxLabelLength = 0;
         switch (state.values.length) {
           case 1:
+            maxLabelLength = Math.max(
+              [...state.getFormattedValue(minValue)].length,
+              [...state.getFormattedValue(maxValue)].length
+            );
             break;
           case 2:
-            // This should really use the NumberFormat#formatRange proposal...
-            // https://github.com/tc39/ecma402/issues/393
-            // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393
-            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange
-            maxLabelLength =
-              3 +
-              2 *
-                Math.max(
-                  maxLabelLength,
-                  [...formatter.format(minValue)].length,
-                  [...formatter.format(maxValue)].length
-                );
+            maxLabelLength = Math.max(
+              [...state.getFormattedValue([minValue, minValue + (props.step || 1)])].length,
+              [...state.getFormattedValue([maxValue - (props.step || 1), maxValue])].length
+            );
             break;
           default:
             throw new Error('Only sliders with 1 or 2 handles are supported!');
@@ -419,9 +409,8 @@ export function SliderBase<T extends number | number[]>(
               minWidth: `${maxLabelLength}ch`,
               fontVariantNumeric: 'tabular-nums'
             }}
-            className={output({direction, labelPosition, isInForm: !!formContext})}>
-            {({state}) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
-          </SliderOutput>
+            className={output({direction, labelPosition, isInForm: !!formContext})}
+          />
         );
 
         return (
@@ -475,32 +464,20 @@ export const Slider = /*#__PURE__*/ forwardRef(function Slider(
   let thumbRef = useRef(null);
   let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0
   let domRef = useFocusableRef(ref, inputRef);
-  let {direction} = useLocale();
-  let cssDirection = direction === 'rtl' ? 'right' : 'left';
   let isStaticColor = props['PRIVATE_staticColor'];
 
   return (
     <SliderBase {...props} sliderRef={domRef}>
       <SliderTrack className={track({size, labelPosition, isInForm: !!formContext})}>
-        {({state, isDisabled}) => {
-          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;
-          let offset = isRightOfOffset
-            ? state.getValuePercent(fillOffset)
-            : state.getThumbPercent(0);
-
+        {({isDisabled}) => {
           return (
             <>
-              <div className={upperTrack({isDisabled, isStaticColor, trackStyle})} />
-              <div
-                style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}}
-                className={filledTrack({isDisabled, isEmphasized, trackStyle})}
-              />
+              <div className={upperTrack({isDisabled, isStaticColor, trackStyle})}>
+                <SliderFill
+                  offset={fillOffset}
+                  className={filledTrack({isDisabled, isEmphasized, trackStyle})}
+                />
+              </div>
               <SliderThumb
                 className={thumbContainer}
                 index={0}

diff --git a/packages/dev/eslint-plugin-rsp-rules/rules/no-getByRole-toThrow.js b/packages/dev/eslint-plugin-rsp-rules/rules/no-getByRole-toThrow.js
@@ -19,7 +19,6 @@ const plugin = {
     /**
      * expect(() => tree.getByRole('separator')).toThrow();
      */
-    // eslint-disable-next-line quotes
     [`CallExpression[callee.property.name='getByRole'][parent.parent.callee.name='expect'][parent.parent.parent.property.name=/toThrow/]`](
       node
     ) {
@@ -38,7 +37,6 @@ const plugin = {
     /**
      * expect(() => getByRole('separator')).toThrow();
      */
-    // eslint-disable-next-line quotes
     [`CallExpression[callee.name='getByRole'][parent.parent.callee.name='expect'][parent.parent.parent.property.name=/toThrow/]`](
       node
     ) {
@@ -53,7 +51,6 @@ const plugin = {
     /**
      * expect(() => {tree.getByRole('separator')}).toThrow();
      */
-    // eslint-disable-next-line quotes
     [`CallExpression[callee.property.name='getByRole'][parent.parent.parent.parent.callee.name='expect'][parent.parent.parent.parent.parent.property.name=/toThrow/]`](
       node
     ) {
@@ -73,7 +70,6 @@ const plugin = {
     /**
      * expect(() => {getByRole('separator')}).toThrow();
      */
-    // eslint-disable-next-line quotes
     [`CallExpression[callee.name='getByRole'][parent.parent.parent.parent.callee.name='expect'][parent.parent.parent.parent.parent.property.name=/toThrow/]`](
       node
     ) {

diff --git a/packages/dev/optimize-locales-plugin/LocalesPlugin.js b/packages/dev/optimize-locales-plugin/LocalesPlugin.js
@@ -18,7 +18,7 @@ module.exports = createUnplugin(({locales}) => {
     name: 'locales-plugin',
     resolveId(specifier, sourcePath, options) {
       if (
-        !/[/\\](@react-stately|@react-aria|@react-spectrum|react-aria-components)[/\\]/.test(
+        !/[/\\](@react-stately|@react-aria|@react-spectrum|react-aria|react-aria-components)[/\\]/.test(
           sourcePath
         ) ||
         options?.ssr

diff --git a/packages/dev/parcel-resolver-optimize-locales/LocalesResolver.js b/packages/dev/parcel-resolver-optimize-locales/LocalesResolver.js
@@ -23,7 +23,7 @@ module.exports = new Resolver({
   resolve({specifier, dependency, config}) {
     if (
       !Array.isArray(config) ||
-      !/[/\\](@react-stately|@react-aria|@react-spectrum|react-aria-components)[/\\]/.test(
+      !/[/\\](@react-stately|@react-aria|@react-spectrum|react-aria|react-aria-components)[/\\]/.test(
         dependency.sourcePath
       )
     ) {

diff --git a/packages/dev/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
@@ -2,6 +2,7 @@ import {Layout} from '../../src/Layout';
 export default Layout;
 
 import docs from 'docs:react-aria-components';
+import vanillaDocs from 'docs:vanilla-starter/Slider';
 import {Slider as VanillaSlider} from 'vanilla-starter/Slider';
 import {Slider as TailwindSlider} from 'tailwind-starter/Slider';
 import tailwindDocs from 'docs:tailwind-starter/Slider';
@@ -86,15 +87,16 @@ By default, slider values are percentages between 0 and 100. Use the `minValue`,
 
 <VisualExample
   component={VanillaSlider}
-  docs={docs.exports.Slider}
-  links={docs.links}
-  props={['minValue', 'maxValue', 'step']}
+  docs={vanillaDocs.exports.Slider}
+  links={vanillaDocs.links}
+  props={['minValue', 'maxValue', 'step', 'fillOffset']}
   initialProps={{
     label: 'Amount',
     minValue: 0,
     maxValue: 150,
     defaultValue: 50,
-    step: 5
+    step: 5,
+    fillOffset: 75
   }} />
 
 ## Examples
@@ -105,11 +107,12 @@ By default, slider values are percentages between 0 and 100. Use the `minValue`,
 
 <Anatomy />
 
-```tsx links={{Slider: '#slider', SliderOutput: '#slideroutput', SliderTrack: '#slidertrack', SliderThumb: '#sliderthumb'}}
+```tsx links={{Slider: '#slider', SliderOutput: '#slideroutput', SliderTrack: '#slidertrack', SliderFill: '#sliderfill', SliderThumb: '#sliderthumb'}}
 <Slider>
   <Label />
   <SliderOutput />
   <SliderTrack>
+    <SliderFill />
     <SliderThumb />
     <SliderThumb>
       <Label />
@@ -130,6 +133,10 @@ By default, slider values are percentages between 0 and 100. Use the `minValue`,
 
 <PropTable component={docs.exports.SliderTrack} links={docs.links} showDescription />
 
+### SliderFill
+
+<PropTable component={docs.exports.SliderFill} links={docs.links} showDescription />
+
 ### SliderThumb
 
 <PropTable component={docs.exports.SliderThumb} links={docs.links} showDescription />
diff --git a/packages/react-aria-components/exports/Slider.ts b/packages/react-aria-components/exports/Slider.ts
@@ -19,9 +19,11 @@ export {
   SliderOutput,
   SliderTrack,
   SliderThumb,
+  SliderFill,
   SliderContext,
   SliderOutputContext,
   SliderTrackContext,
+  SliderFillContext,
   SliderStateContext
 } from '../src/Slider';
 export type {
@@ -31,7 +33,9 @@ export type {
   SliderThumbProps,
   SliderTrackProps,
   SliderTrackRenderProps,
-  SliderThumbRenderProps
+  SliderThumbRenderProps,
+  SliderFillProps,
+  SliderFillRenderProps
 } from '../src/Slider';
 export type {SliderState} from 'react-stately/useSliderState';
 

diff --git a/packages/react-aria-components/exports/index.ts b/packages/react-aria-components/exports/index.ts
@@ -186,9 +186,11 @@ export {
   SliderOutput,
   SliderTrack,
   SliderThumb,
+  SliderFill,
   SliderContext,
   SliderOutputContext,
   SliderTrackContext,
+  SliderFillContext,
   SliderStateContext
 } from '../src/Slider';
 export {Switch, SwitchField, SwitchButton, SwitchContext, SwitchFieldContext} from '../src/Switch';
@@ -440,6 +442,8 @@ export type {
   SliderThumbProps,
   SliderTrackProps,
   SliderTrackRenderProps,
+  SliderFillProps,
+  SliderFillRenderProps,
   SliderThumbRenderProps
 } from '../src/Slider';
 export type {

diff --git a/packages/react-aria-components/src/DragAndDrop.tsx b/packages/react-aria-components/src/DragAndDrop.tsx
@@ -86,9 +86,9 @@ export function useRenderDropIndicator(
           <DropIndicator target={target} />
         );
       }
-      // We invalidate whenever the target changes.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     },
+    // We invalidate whenever the target changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [dropState?.target, isVirtualDragging, renderDropIndicator]
   );
   return dragAndDropHooks?.useDropIndicator ? fn : undefined;