feat: Add SliderFill component and improve default SliderOutput formatting

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}

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}

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

@@ -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';
 

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 {

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}
+    />
+  );
+});