score:2

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>
  );
}

Related Query

More Query from same tag