Getting the value from a Material UI Slider component

user_13955349 0
Viewed 2641

I'm having trouble trying to access the value property I've added to a component.

event.target.value

returns undefined. How can you access the value on the component? I want to eventually have handlePlayersChange() to able to accept dynamic values.

const SearchForm = () => {
  const [numPlayers, setNumPlayers] = useState([4, 6]);

  const handleSubmit = (event: any) => {
    event.preventDefault();
  };

  const handlePlayersChange = (event: any, newValue: any) => {
    setNumPlayers(newValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Search for Games!</h1>
      <div className="slidecontainer">
        <Typography id="range-slider" gutterBottom>
          Number of Players
        </Typography>
        <Slider
          className="slider"
          min={1}
          max={8}
          value={numPlayers}
          onChange={handlePlayersChange}
          valueLabelDisplay="auto"
          aria-labelledby="range-slider"
        />
      </div>
      <button>Search</button>
    </form>
  );

Any information would be greatly appreciated! Thank you.

material-ui typescript reactjs javascript
1 Answers

Perhaps you should take the slider into a separate component, and use several instances of such sliders, based on your example, I got something like this:

import React from "react";
import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/core/Slider";

const SearchSlider = ({ onChange, name }) => {
  const [numPlayers, setNumPlayers] = React.useState([4, 6]);

  const handlePlayersChange = (event: any, newValue: any) => {
    setNumPlayers(newValue);
    onChange({name, newValue});
  };

  return (
    <div className="slidecontainer">
      <Typography id="range-slider" gutterBottom>
        Number of Players {name}
      </Typography>
      <Slider
        className="slider"
        min={1}
        max={8}
        name={name}
        value={numPlayers}
        onChange={handlePlayersChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
      />
    </div>
  );
};

export default function SearchForm() {
  const [numPlayersBySliders, setNumPlayersBySliders] = React.useState([]);

  const handleSubmit = (event: any) => {
    event.preventDefault();
  };

  const onChange = ({ newValue, name }) => {
    const clearState = numPlayersBySliders.filter(s => s.name !== name);
    const newItem = { name, numPlayers: newValue };
    setNumPlayersBySliders([...clearState, newItem]);
    console.log(numPlayersBySliders);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h1>Search for Games!</h1>
      <div className="slidecontainer">
        <SearchSlider onChange={onChange} name="Slider_1" />
        <SearchSlider onChange={onChange} name="Slider_2" />
      </div>
      <button>Search</button>
    </form>
  );
}

In this case, you can distinguish between values of different sliders by name

user_146033380
Related