Function Slider

starters/hooks/src/Slider.tsx:35–97

({
  label,
  thumbLabels,
  fillOffset,
  formatOptions,
  style,
  ...props
}: SliderProps)

}

export function Slider({
  label,
  thumbLabels,
  fillOffset,
  formatOptions,
  style,
  ...props
}: SliderProps) {
  let trackRef = useRef<HTMLDivElement>(null);
  let numberFormatter = useNumberFormatter(formatOptions);
  let state = useSliderState({...props, numberFormatter});
  /*- begin highlight -*/
  let {groupProps, trackProps, labelProps, outputProps} = useSlider(props, state, trackRef);
  /*- end highlight -*/

  // The fill spans from fillOffset (or the min) to the last thumb.
  let start =
    state.values.length > 1
      ? state.getThumbPercent(0) * 100
      : state.getValuePercent(fillOffset ?? state.getThumbMinValue(0)) * 100;
  let end = state.getThumbPercent(state.values.length - 1) * 100;
  let startPercent = Math.min(start, end);
  let sizePercent = Math.max(0, Math.max(start, end) - startPercent);

  return (
    <div
      {...groupProps}
      className="react-aria-Slider"
      data-orientation={state.orientation}
      style={style}>
      {label && (
        <label className="react-aria-Label" {...labelProps}>
          {label}
        </label>
      )}
      <output {...outputProps} className="react-aria-SliderOutput">
        {state.getFormattedValue()}
      </output>
      <div {...trackProps} ref={trackRef} className="react-aria-SliderTrack">
        <div className="track inset" data-disabled={state.isDisabled || undefined}>
          <div
            className="react-aria-SliderFill"
            style={{
              position: 'absolute',
              insetInlineStart: `${startPercent}%`,
              width: `${sizePercent}%`,
              height: '100%'
            }}
          />
        </div>
        {state.values.map((_, i) => (
          <Thumb
            key={i}
            index={i}
            state={state}
            trackRef={trackRef}
            aria-label={thumbLabels?.[i]}
          />