Function RangeExample

packages/react-aria/test/slider/useSliderThumb.test.js:165–203

(props)

    let stateRef = React.createRef();

    function RangeExample(props) {
      let trackRef = useRef(null);
      let input0Ref = useRef(null);
      let input1Ref = useRef(null);
      let state = useSliderState({...props, numberFormatter});
      stateRef.current = state;
      let {trackProps, thumbProps: commonThumbProps} = useSlider(props, state, trackRef);
      let {inputProps: input0Props, thumbProps: thumb0Props} = useSliderThumb(
        {
          ...commonThumbProps,
          'aria-label': 'Min',
          index: 0,
          trackRef,
          inputRef: input0Ref
        },
        state
      );
      let {inputProps: input1Props, thumbProps: thumb1Props} = useSliderThumb(
        {
          ...commonThumbProps,
          'aria-label': 'Max',
          index: 1,
          trackRef,
          inputRef: input1Ref
        },
        state
      );
      return (
        <div>
          <div data-testid="track" ref={trackRef} {...trackProps} />
          <div data-testid="thumb0" {...thumb0Props}>
            <input ref={input0Ref} {...input0Props} />
          </div>
          <div data-testid="thumb1" {...thumb1Props}>
            <input ref={input1Ref} {...input1Props} />
          </div>
        </div>
      );
    }

    describe('using PointerEvents', () => {
      installPointerEvent();