title: Getting the value from a Material UI Slider component
body: <p>I'm having trouble trying to access the value property I've added to a  component.</p>
  <pre><code>event.target.value
  </code></pre>
  <p>returns undefined. How can you access the value on the component? I want to eventually have handlePlayersChange() to able to accept dynamic values.</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>const SearchForm = () =&gt; {
    const [numPlayers, setNumPlayers] = useState([4, 6]);
  
    const handleSubmit = (event: any) =&gt; {
      event.preventDefault();
    };
  
    const handlePlayersChange = (event: any, newValue: any) =&gt; {
      setNumPlayers(newValue);
    };
  
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;h1&gt;Search for Games!&lt;/h1&gt;
        &lt;div className="slidecontainer"&gt;
          &lt;Typography id="range-slider" gutterBottom&gt;
            Number of Players
          &lt;/Typography&gt;
          &lt;Slider
            className="slider"
            min={1}
            max={8}
            value={numPlayers}
            onChange={handlePlayersChange}
            valueLabelDisplay="auto"
            aria-labelledby="range-slider"
          /&gt;
        &lt;/div&gt;
        &lt;button&gt;Search&lt;/button&gt;
      &lt;/form&gt;
    );</code></pre>
  </div>
  </div>
  </p>
  <p>Any information would be greatly appreciated! Thank you.</p>