diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx
index af06d58df34..dadb9c31865 100644
--- 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
index 3c7a72438a6..e207d3e4cc4 100644
--- 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/s2-docs/pages/react-aria/Slider.mdx b/packages/dev/s2-docs/pages/react-aria/Slider.mdx
index 2e4e7f5241d..93832940b74 100644
--- 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
index 9fe25e084d3..4459bb81bf4 100644
--- 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
index dc0cb411470..2741fa18643 100644
--- 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/Slider.tsx b/packages/react-aria-components/src/Slider.tsx
index 895d00fa122..ff71cd9387c 100644
--- a/packages/react-aria-components/src/Slider.tsx
+++ b/packages/react-aria-components/src/Slider.tsx
@@ -17,6 +17,7 @@ import {
   useSliderThumb
 } from 'react-aria/useSlider';
 
+import {clamp} from 'react-stately/private/utils/number';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -70,6 +71,7 @@ export const SliderContext = createContext<ContextValue<SliderProps, HTMLDivElem
 export const SliderStateContext = createContext<SliderState | null>(null);
 export const SliderTrackContext =
   createContext<ContextValue<SliderTrackContextValue, HTMLDivElement>>(null);
+export const SliderFillContext = createContext<ContextValue<SliderFillProps, HTMLDivElement>>(null);
 export const SliderOutputContext =
   createContext<ContextValue<SliderOutputContextValue, HTMLOutputElement>>(null);
 
@@ -167,7 +169,7 @@ export const SliderOutput = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
     style,
     children,
     render,
-    defaultChildren: state.getThumbValueLabel(0),
+    defaultChildren: state.getFormattedValue(),
     defaultClassName: 'react-aria-SliderOutput',
     values: {
       orientation: state.orientation,
@@ -355,3 +357,85 @@ export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     </dom.div>
   );
 });
+
+export interface SliderFillRenderProps extends SliderRenderProps {
+  /**
+   * Whether the slider fill is currently hovered with a mouse.
+   * @selector [data-hovered]
+   */
+  isHovered: boolean;
+}
+
+export interface SliderFillProps
+  extends HoverEvents, RenderProps<SliderFillRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
+  /**
+   * The offset from which to start the fill.
+   * @default 0
+   */
+  offset?: number;
+  /**
+   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
+   * @default 'react-aria-SliderFill'
+   */
+  className?: ClassNameOrFunction<SliderFillRenderProps>;
+}
+
+/**
+ * Displays the selected range.
+ */
+export const SliderFill = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderFill(
+  props: SliderFillProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
+  [props, ref] = useContextProps(props, ref, SliderFillContext);
+  let state = useContext(SliderStateContext)!;
+  let {onHoverStart, onHoverEnd, onHoverChange, ...otherProps} = props;
+  let {hoverProps, isHovered} = useHover({onHoverStart, onHoverEnd, onHoverChange});
+
+  let offset =
+    props.offset != null
+      ? clamp(props.offset, state.getThumbMinValue(0), state.getThumbMaxValue(0))
+      : state.getThumbMinValue(0);
+  let start =
+    state.values.length > 1 ? state.getThumbPercent(0) * 100 : state.getValuePercent(offset) * 100;
+  let end = state.values.length > 0 ? state.getThumbPercent(state.values.length - 1) * 100 : 0;
+  let startPercent = Math.min(start, end);
+  let endPercent = Math.max(start, end);
+  let sizePercent = Math.max(0, endPercent - startPercent);
+
+  let renderProps = useRenderProps({
+    ...props,
+    defaultClassName: 'react-aria-SliderFill',
+    defaultStyle:
+      state.orientation === 'vertical'
+        ? {
+            position: 'absolute',
+            bottom: `${startPercent}%`,
+            height: `${sizePercent}%`,
+            width: '100%'
+          }
+        : {
+            position: 'absolute',
+            insetInlineStart: `${startPercent}%`,
+            width: `${sizePercent}%`,
+            height: '100%'
+          },
+    values: {
+      orientation: state.orientation,
+      isDisabled: state.isDisabled,
+      isHovered,
+      state
+    }
+  });
+
+  return (
+    <dom.div
+      {...mergeProps(otherProps, hoverProps)}
+      {...renderProps}
+      ref={ref}
+      data-hovered={isHovered || undefined}
+      data-orientation={state.orientation || undefined}
+      data-disabled={state.isDisabled || undefined}
+    />
+  );
+});
diff --git a/packages/react-aria-components/test/Slider.test.js b/packages/react-aria-components/test/Slider.test.js
index 7de32bc943d..c2f8278b65b 100644
--- a/packages/react-aria-components/test/Slider.test.js
+++ b/packages/react-aria-components/test/Slider.test.js
@@ -13,14 +13,22 @@
 import {fireEvent, pointerMap, render} from '@react-spectrum/test-utils-internal';
 import {Label} from '../src/Label';
 import React, {useState} from 'react';
-import {Slider, SliderContext, SliderOutput, SliderThumb, SliderTrack} from '../src/Slider';
+import {
+  Slider,
+  SliderContext,
+  SliderFill,
+  SliderOutput,
+  SliderThumb,
+  SliderTrack
+} from '../src/Slider';
 import userEvent from '@testing-library/user-event';
 
-let TestSlider = ({sliderProps, thumbProps, trackProps, outputProps}) => (
+let TestSlider = ({sliderProps, thumbProps, trackProps, outputProps, fillProps}) => (
   <Slider {...sliderProps}>
     <Label>Opacity</Label>
     <SliderOutput {...outputProps} />
     <SliderTrack {...trackProps}>
+      <SliderFill {...fillProps} />
       <SliderThumb {...thumbProps} />
     </SliderTrack>
   </Slider>
@@ -46,6 +54,7 @@ describe('Slider', () => {
     expect(getByRole('status')).toHaveTextContent('0');
     expect(group.querySelector('.react-aria-SliderTrack')).toBeInTheDocument();
     expect(group.querySelector('.react-aria-SliderThumb')).toBeInTheDocument();
+    expect(group.querySelector('.react-aria-SliderFill')).toBeInTheDocument();
   });
 
   it('should render a slider with custom class', () => {
@@ -239,13 +248,11 @@ describe('Slider', () => {
     expect(slider).toHaveAttribute('aria-orientation', 'vertical');
   });
 
-  it('should support multiple thumbs', () => {
+  it('should support two thumbs', () => {
     let {getByRole, getAllByRole} = render(
       <Slider defaultValue={[30, 60]}>
         <Label>Test</Label>
-        <SliderOutput>
-          {({state}) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
-        </SliderOutput>
+        <SliderOutput />
         <SliderTrack>
           {({state}) => state.values.map((_, i) => <SliderThumb key={i} index={i} />)}
         </SliderTrack>
@@ -258,7 +265,28 @@ describe('Slider', () => {
     expect(sliders[1]).toHaveValue('60');
 
     let output = getByRole('status');
-    expect(output).toHaveTextContent('30 – 60');
+    expect(output).toHaveTextContent('30–60');
+  });
+
+  it('should support three thumbs', () => {
+    let {getByRole, getAllByRole} = render(
+      <Slider defaultValue={[30, 60, 80]}>
+        <Label>Test</Label>
+        <SliderOutput />
+        <SliderTrack>
+          {({state}) => state.values.map((_, i) => <SliderThumb key={i} index={i} />)}
+        </SliderTrack>
+      </Slider>
+    );
+
+    let sliders = getAllByRole('slider');
+    expect(sliders).toHaveLength(3);
+    expect(sliders[0]).toHaveValue('30');
+    expect(sliders[1]).toHaveValue('60');
+    expect(sliders[2]).toHaveValue('80');
+
+    let output = getByRole('status');
+    expect(output).toHaveTextContent('30, 60, 80');
   });
 
   it('should support multiple thumbs (controlled)', async () => {
@@ -268,9 +296,7 @@ describe('Slider', () => {
         <div>
           <Slider value={value} onChange={setValue}>
             <Label>Test</Label>
-            <SliderOutput>
-              {({state}) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
-            </SliderOutput>
+            <SliderOutput />
             <SliderTrack>
               {({state}) =>
                 state.values.map((_, i) => <SliderThumb key={i} index={i} className="thumb" />)
@@ -356,4 +382,63 @@ describe('Slider', () => {
     let input = getByRole('slider');
     expect(input).toHaveAttribute('form', 'test');
   });
+
+  it('should support horizontal SliderFill', () => {
+    let {getByRole} = render(<TestSlider sliderProps={{value: 30}} />);
+    let group = getByRole('group');
+    let fill = group.querySelector('.react-aria-SliderFill');
+    expect(fill).toHaveAttribute('data-orientation', 'horizontal');
+    expect(fill).toHaveStyle({
+      position: 'absolute',
+      insetInlineStart: '0%',
+      width: '30%',
+      height: '100%'
+    });
+  });
+
+  it('should support horizontal SliderFill with offset', () => {
+    let {getByRole, rerender} = render(
+      <TestSlider sliderProps={{value: 30}} fillProps={{offset: 50}} />
+    );
+    let group = getByRole('group');
+    let fill = group.querySelector('.react-aria-SliderFill');
+    expect(fill).toHaveAttribute('data-orientation', 'horizontal');
+    expect(fill).toHaveStyle({
+      position: 'absolute',
+      insetInlineStart: '30%',
+      width: '20%',
+      height: '100%'
+    });
+
+    rerender(<TestSlider sliderProps={{value: 80}} fillProps={{offset: 50}} />);
+    expect(fill).toHaveStyle({
+      position: 'absolute',
+      insetInlineStart: '50%',
+      width: '30%',
+      height: '100%'
+    });
+  });
+
+  it('should support vertical SliderFill', () => {
+    let {getByRole} = render(<TestSlider sliderProps={{value: 30, orientation: 'vertical'}} />);
+    let group = getByRole('group');
+    let fill = group.querySelector('.react-aria-SliderFill');
+    expect(fill).toHaveAttribute('data-orientation', 'vertical');
+    expect(fill).toHaveStyle({position: 'absolute', bottom: '0%', height: '30%', width: '100%'});
+  });
+
+  it('should support vertical SliderFill with offset', () => {
+    let {getByRole, rerender} = render(
+      <TestSlider sliderProps={{value: 30, orientation: 'vertical'}} fillProps={{offset: 50}} />
+    );
+    let group = getByRole('group');
+    let fill = group.querySelector('.react-aria-SliderFill');
+    expect(fill).toHaveAttribute('data-orientation', 'vertical');
+    expect(fill).toHaveStyle({position: 'absolute', bottom: '30%', height: '20%', width: '100%'});
+
+    rerender(
+      <TestSlider sliderProps={{value: 80, orientation: 'vertical'}} fillProps={{offset: 50}} />
+    );
+    expect(fill).toHaveStyle({position: 'absolute', bottom: '50%', height: '30%', width: '100%'});
+  });
 });
diff --git a/packages/react-stately/src/color/useColorSliderState.ts b/packages/react-stately/src/color/useColorSliderState.ts
index 883e12ad669..a9096bb3796 100644
--- a/packages/react-stately/src/color/useColorSliderState.ts
+++ b/packages/react-stately/src/color/useColorSliderState.ts
@@ -82,12 +82,11 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
       colorSpace && defaultColorValue ? defaultColorValue.toFormat(colorSpace) : defaultColorValue,
     [defaultColorValue, colorSpace]
   );
+  let numberFormatter = useMemo(() => new Intl.NumberFormat(), []);
   let sliderState = useSliderState({
     ...color.getChannelRange(channel),
     ...otherProps,
-    // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
-    // @ts-ignore
-    numberFormatter: null,
+    numberFormatter,
     value: color.getChannelValue(channel),
     defaultValue: defaultColor.getChannelValue(channel),
     onChange(v) {
@@ -129,6 +128,9 @@ export function useColorSliderState(props: ColorSliderStateOptions): ColorSlider
     getThumbValueLabel() {
       return color.formatChannelValue(channel, locale);
     },
+    getFormattedValue() {
+      return color.formatChannelValue(channel, locale);
+    },
     step,
     pageSize,
     isDragging: sliderState.isThumbDragging(0)
diff --git a/packages/react-stately/src/slider/useSliderState.ts b/packages/react-stately/src/slider/useSliderState.ts
index 0c83cd5a63d..4b83c644b67 100644
--- a/packages/react-stately/src/slider/useSliderState.ts
+++ b/packages/react-stately/src/slider/useSliderState.ts
@@ -118,9 +118,9 @@ export interface SliderState {
 
   /**
    * Returns the string label for the value, per props.formatOptions.
-   * @param index
+   * @param value
    */
-  getFormattedValue(value: number): string;
+  getFormattedValue(value?: number | number[]): string;
 
   /**
    * Returns the min allowed value for the specified thumb.
@@ -304,8 +304,35 @@ export function useSliderState<T extends number | number[]>(
     }
   }
 
-  function getFormattedValue(value: number) {
-    return formatter.format(value);
+  let listFormatRef = useRef<Intl.ListFormat | null>(null);
+
+  function getFormattedValue(valueParam: number | number[] = values) {
+    if (typeof valueParam === 'number') {
+      valueParam = [valueParam];
+    }
+
+    switch (valueParam.length) {
+      case 0:
+        return '';
+      case 1:
+        return formatter.format(valueParam[0]);
+      case 2:
+        return formatter.formatRange(valueParam[0], valueParam[1]);
+      default: {
+        let formatted = valueParam.map(value => formatter.format(value));
+        let listFormat = listFormatRef.current;
+        if (
+          !listFormat ||
+          listFormat.resolvedOptions().locale !== formatter.resolvedOptions().locale
+        ) {
+          listFormat = listFormatRef.current = new Intl.ListFormat(
+            formatter.resolvedOptions().locale,
+            {type: 'unit'}
+          );
+        }
+        return listFormat.format(formatted);
+      }
+    }
   }
 
   function setThumbPercent(index: number, percent: number) {
diff --git a/starters/docs/src/Slider.css b/starters/docs/src/Slider.css
index 6de0e01d2ea..866393515bf 100644
--- a/starters/docs/src/Slider.css
+++ b/starters/docs/src/Slider.css
@@ -30,9 +30,7 @@
       border-radius: 9999px;
     }
 
-    .fill {
-      position: absolute;
-      margin: 1px 0 0 1px;
+    .react-aria-SliderFill {
       border-radius: inherit;
       background: var(--tint-900);
 
@@ -70,22 +68,19 @@
         transform: translateY(-50%);
       }
 
-      .fill {
-        inset-inline-start: var(--start, 0);
-        width: var(--size);
-        height: calc(100% - 2px);
+      .react-aria-SliderFill {
         box-shadow:
-          inset 0 1px 0 rgb(255 255 255 / 0.3),
-          inset 0 2px 2px rgb(255 255 255 / 0.2),
-          0 1px 0 lch(from var(--tint) 42% c h),
-          0 0 0 1px var(--tint-900);
+          inset 0 -1px 0 lch(from var(--tint) 42% c h),
+          inset 0 0 0 1px var(--tint-900),
+          inset 0 2px 0 rgb(255 255 255 / 0.3),
+          inset 0 3px 2px rgb(255 255 255 / 0.2);
 
         @media (prefers-color-scheme: dark) {
           box-shadow:
-            0 -1px 0 rgb(255 255 255 / 0.6),
-            inset 0 2px 2px rgb(255 255 255 / 0.2),
-            0 1px 0 lch(from var(--tint) 42% c h),
-            0 0 0 1px var(--tint-900);
+            inset 0 -1px 0 lch(from var(--tint) 42% c h),
+            inset 0 1px 0 rgb(255 255 255 / 0.6),
+            inset 0 0 0 1px var(--tint-900),
+            inset 0 3px 2px rgb(255 255 255 / 0.2);
         }
 
         @media (forced-colors: active) {
@@ -120,22 +115,19 @@
         transform: translateX(-50%);
       }
 
-      .fill {
-        inset-block-end: var(--start, 0);
-        height: var(--size);
-        width: calc(100% - 2px);
+      .react-aria-SliderFill {
         box-shadow:
-          inset 1px 0 0 rgb(255 255 255 / 0.3),
-          inset 2px 0 2px rgb(255 255 255 / 0.2),
-          1px 0 0 lch(from var(--tint) 42% c h),
-          0 0 0 1px var(--tint-900);
+          inset -1px 0 0 lch(from var(--tint) 42% c h),
+          inset 0 0 0 1px var(--tint-900),
+          inset 2px 0 0 rgb(255 255 255 / 0.3),
+          inset 3px 0 2px rgb(255 255 255 / 0.2);
 
         @media (prefers-color-scheme: dark) {
           box-shadow:
-            -1px 0 0 rgb(255 255 255 / 0.6),
-            inset 2px 0 2px rgb(255 255 255 / 0.2),
-            1px 0 0 lch(from var(--tint) 42% c h),
-            0 0 0 1px var(--tint-900);
+            inset -1px 0 0 lch(from var(--tint) 42% c h),
+            inset 1px 0 0 rgb(255 255 255 / 0.6),
+            inset 0 0 0 1px var(--tint-900),
+            inset 3px 0 2px rgb(255 255 255 / 0.2);
         }
 
         @media (forced-colors: active) {
@@ -156,7 +148,7 @@
         --border-color: var(--border-color-disabled);
       }
 
-      .fill {
+      .react-aria-SliderFill {
         background: var(--border-color-disabled);
         box-shadow: none;
       }
diff --git a/starters/docs/src/Slider.tsx b/starters/docs/src/Slider.tsx
index 9a59dd1cee0..0763d46617e 100644
--- a/starters/docs/src/Slider.tsx
+++ b/starters/docs/src/Slider.tsx
@@ -4,49 +4,39 @@ import {
   SliderOutput,
   type SliderProps as AriaSliderProps,
   SliderThumb,
-  SliderTrack
+  SliderTrack,
+  SliderFill
 } from 'react-aria-components/Slider';
 import {Label} from './Form';
 import './Slider.css';
 
 export interface SliderProps<T> extends AriaSliderProps<T> {
+  /** Label for the slider. */
   label?: string;
+  /** Aria labels for each thumb. */
   thumbLabels?: string[];
+  /**
+   * The offset from which to start the fill.
+   * @default 0
+   */
+  fillOffset?: number;
 }
 
 export function Slider<T extends number | number[]>({
   label,
   thumbLabels,
+  fillOffset,
   ...props
 }: SliderProps<T>) {
   return (
     <AriaSlider {...props}>
       {label && <Label>{label}</Label>}
-      <SliderOutput>
-        {({state}) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
-      </SliderOutput>
+      <SliderOutput />
       <SliderTrack>
         {({state, isDisabled}) => (
           <>
             <div className="track inset" data-disabled={isDisabled || undefined}>
-              {state.values.length === 1 ? (
-                // Single thumb, render fill from the end
-                <div
-                  className="fill"
-                  style={{'--size': state.getThumbPercent(0) * 100 + '%'} as any}
-                />
-              ) : state.values.length === 2 ? (
-                // Range slider, render fill between the thumbs
-                <div
-                  className="fill"
-                  style={
-                    {
-                      '--start': state.getThumbPercent(0) * 100 + '%',
-                      '--size': (state.getThumbPercent(1) - state.getThumbPercent(0)) * 100 + '%'
-                    } as any
-                  }
-                />
-              ) : null}
+              <SliderFill offset={fillOffset} />
             </div>
             {state.values.map((_, i) => (
               <SliderThumb
diff --git a/starters/tailwind/src/Slider.tsx b/starters/tailwind/src/Slider.tsx
index 566d1f6f25b..3c9c490a902 100644
--- a/starters/tailwind/src/Slider.tsx
+++ b/starters/tailwind/src/Slider.tsx
@@ -5,14 +5,15 @@ import {
   type SliderProps as AriaSliderProps,
   SliderOutput,
   SliderThumb,
-  SliderTrack
+  SliderTrack,
+  SliderFill
 } from 'react-aria-components/Slider';
 import {tv} from 'tailwind-variants';
 import {Label} from './Field';
 import {composeTailwindRenderProps, focusRing} from './utils';
 
 const trackStyles = tv({
-  base: 'rounded-full',
+  base: 'relative rounded-full',
   variants: {
     orientation: {
       horizontal: 'w-full h-[6px]',
@@ -26,12 +27,8 @@ const trackStyles = tv({
 });
 
 const fillStyles = tv({
-  base: 'absolute rounded-full',
+  base: 'rounded-full',
   variants: {
-    orientation: {
-      horizontal: 'w-(--size) h-[6px] start-(--start,0)',
-      vertical: 'h-(--size) w-[6px] bottom-(--start,0) ml-[50%] -translate-x-[50%]'
-    },
     isDisabled: {
       false: 'bg-blue-500 forced-colors:bg-[Highlight]',
       true: 'bg-neutral-300 dark:bg-neutral-600 forced-colors:bg-[GrayText]'
@@ -53,13 +50,21 @@ const thumbStyles = tv({
 });
 
 export interface SliderProps<T> extends AriaSliderProps<T> {
+  /** Label for the slider. */
   label?: string;
+  /** Aria labels for each thumb. */
   thumbLabels?: string[];
+  /**
+   * The offset from which to start the fill.
+   * @default 0
+   */
+  fillOffset?: number;
 }
 
 export function Slider<T extends number | number[]>({
   label,
   thumbLabels,
+  fillOffset,
   ...props
 }: SliderProps<T>) {
   return (
@@ -70,31 +75,13 @@ export function Slider<T extends number | number[]>({
         'font-sans orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-64 orientation-horizontal:max-w-[calc(100%-10px)]'
       )}>
       <Label>{label}</Label>
-      <SliderOutput className="text-sm text-neutral-500 dark:text-neutral-400 orientation-vertical:hidden">
-        {({state}) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}
-      </SliderOutput>
+      <SliderOutput className="text-sm text-neutral-500 dark:text-neutral-400 orientation-vertical:hidden" />
       <SliderTrack className="group col-span-2 orientation-horizontal:h-5 orientation-vertical:w-5 orientation-vertical:h-38 flex items-center">
         {({state, ...renderProps}) => (
           <>
-            <div className={trackStyles(renderProps)} />
-            {state.values.length === 1 ? (
-              // Single thumb, render fill from the end
-              <div
-                className={fillStyles(renderProps)}
-                style={{'--size': state.getThumbPercent(0) * 100 + '%'} as any}
-              />
-            ) : state.values.length === 2 ? (
-              // Range slider, render fill between the thumbs
-              <div
-                className={fillStyles(renderProps)}
-                style={
-                  {
-                    '--start': state.getThumbPercent(0) * 100 + '%',
-                    '--size': (state.getThumbPercent(1) - state.getThumbPercent(0)) * 100 + '%'
-                  } as any
-                }
-              />
-            ) : null}
+            <div className={trackStyles(renderProps)}>
+              <SliderFill offset={fillOffset} className={fillStyles(renderProps)} />
+            </div>
             {state.values.map((_, i) => (
               <SliderThumb
                 key={i}