feat: Add SliderFill component and improve default SliderOutput formatting

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

@@ -11,17 +11,15 @@
  */
 
 import {ContextValue} from 'react-aria-components/slots';
-
 import {createContext, forwardRef, useContext, useRef} from 'react';
 import {filledTrack, SliderBase, SliderBaseProps, thumb, thumbContainer, thumbHitArea, track, upperTrack} 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';
 
@@ -64,8 +62,6 @@ export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props:
   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];
@@ -86,13 +82,9 @@ export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props:
         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}

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, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
@@ -31,7 +30,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> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'render' | 'orientation' | keyof GlobalDOMAttributes>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {
@@ -291,9 +289,10 @@ export let upperTrack = style<{isDisabled?: boolean, isStaticColor?: boolean, tr
   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',
@@ -336,10 +335,8 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
     labelAlign = 'start',
     size = 'M',
     minValue = 0,
-    maxValue = 100,
-    formatOptions
+    maxValue = 100
   } = props;
-  let formatter = useNumberFormatter(formatOptions);
   let {direction} = useLocale();
 
   return (
@@ -348,19 +345,13 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
       ref={props.sliderRef}
       className={renderProps => (props.UNSAFE_className || '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>
       {({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!');
@@ -369,10 +360,7 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
         let outputValue = (
           <SliderOutput
             style={{width: `${maxLabelLength}ch`, 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 (
@@ -417,8 +405,6 @@ export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProp
   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 (
@@ -427,18 +413,13 @@ export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProp
       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} name={props.name} form={props.form} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>
                 {(renderProps) => (
                   <div className={thumbHitArea({size})}>

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 />

packages/react-aria-components/exports/Slider.ts

@@ -14,8 +14,8 @@
 // to import it from a React Server Component in a framework like Next.js.
 import 'client-only';
 
-export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext, SliderOutputContext, SliderTrackContext, SliderStateContext} from '../src/Slider';
-export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SliderThumbRenderProps} from '../src/Slider';
+export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderFill, SliderContext, SliderOutputContext, SliderTrackContext, SliderFillContext, SliderStateContext} from '../src/Slider';
+export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SliderThumbRenderProps, SliderFillProps, SliderFillRenderProps} from '../src/Slider';
 export type {SliderState} from 'react-stately/useSliderState';
 
 export {Label} from '../src/Label';

packages/react-aria-components/exports/index.ts

@@ -62,7 +62,7 @@ export {Select, SelectValue, SelectContext, SelectValueContext, SelectStateConte
 export {SelectionIndicator, SelectionIndicatorContext} from '../src/SelectionIndicator';
 export {Separator, SeparatorContext} from '../src/Separator';
 export {SharedElementTransition, SharedElement} from '../src/SharedElementTransition';
-export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext, SliderOutputContext, SliderTrackContext, SliderStateContext} from '../src/Slider';
+export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderFill, SliderContext, SliderOutputContext, SliderTrackContext, SliderFillContext, SliderStateContext} from '../src/Slider';
 export {Switch, SwitchField, SwitchButton, SwitchContext, SwitchFieldContext} from '../src/Switch';
 export {TableLoadMoreItem, Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions, TableStateContext, TableColumnResizeStateContext, TableFooter} from '../src/Table';
 export {TableLayout} from '../src/TableLayout';
@@ -146,7 +146,7 @@ export type {SelectProps, SelectValueProps, SelectValueRenderProps, SelectRender
 export type {SelectionIndicatorProps} from '../src/SelectionIndicator';
 export type {SharedElementTransitionProps, SharedElementProps, SharedElementRenderProps} from '../src/SharedElementTransition';
 export type {SeparatorProps} from '../src/Separator';
-export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SliderThumbRenderProps} from '../src/Slider';
+export type {SliderOutputProps, SliderProps, SliderRenderProps, SliderThumbProps, SliderTrackProps, SliderTrackRenderProps, SliderFillProps, SliderFillRenderProps, SliderThumbRenderProps} from '../src/Slider';
 export type {SwitchProps, SwitchRenderProps, SwitchFieldProps, SwitchFieldRenderProps, SwitchButtonProps, SwitchButtonRenderProps} from '../src/Switch';
 export type {TableProps, TableRenderProps, TableHeaderProps, TableBodyProps, TableBodyRenderProps, ResizableTableContainerProps, ColumnProps, ColumnRenderProps, ColumnResizerProps, ColumnResizerRenderProps, RowProps, RowRenderProps, CellProps, CellRenderProps, TableLoadMoreItemProps, TableFooterProps} from '../src/Table';
 export type {TabListProps, TabListRenderProps, TabPanelsProps, TabPanelProps, TabPanelRenderProps, TabProps, TabsProps, TabRenderProps, TabsRenderProps} from '../src/Tabs';

packages/react-aria-components/src/Slider.tsx

@@ -12,6 +12,7 @@
 
 import {AriaSliderProps, AriaSliderThumbProps, useSlider, useSliderThumb} from 'react-aria/useSlider';
 
+import {clamp} from 'react-stately/private/utils/number';
 import {
   ClassNameOrFunction,
   ContextValue,
@@ -51,6 +52,7 @@ export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps
 export const SliderContext = createContext<ContextValue<SliderProps, HTMLDivElement>>(null);
 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);
 
 export interface SliderRenderProps {
@@ -140,7 +142,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,
@@ -315,3 +317,79 @@ 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} />
+  );
+});