title: How to do an integration test for a material UI <Slider /> component with userEvent or fireEvent?
body: <p>I have been struggling trying to do an integration test on a material UI  component. I can target the slider, but have not successfully been able to move the slider and find the new value. Do you have any guidance on how to interact with this component and test that interaction?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react";
  import { fireEvent, render, screen } from "@testing-library/react";
  import userEvent from "@testing-library/user-event";
  import "@testing-library/jest-dom";
  import { MemoryRouter } from "react-router-dom";
  import { Slider } from "@material-ui/core";
  
  import SearchForm from "./SearchForm";
  
  describe("SearchForm interaction", () =&gt; {
    it("should change value if slider is moved", () =&gt; {
      const minValue = 1;
      const maxValue = 8;
      const currentValue = 4;
      render(
        &lt;Slider
          className="slider"
          min={minValue}
          max={maxValue}
          value={currentValue}
          onChange={jest.fn()}
          valueLabelDisplay="auto"
          aria-labelledby="range-slider"
          data-testid="numPlayer-slider"
        /&gt;
      );
      const slider = screen.getByTestId("numPlayer-slider");
      //userEvent.click(slider, )
    });
  });</code></pre>
  </div>
  </div>
  </p>