2

I want multiple material-ui sliders in one react component sharing a common event handler. However, to make this work, I would need to identify the originating slider. From the API documentation I can't see how that is achieved. I've tried applying id and name attributes to the <Slider>-component, yet I'm not seeing these in the synthesized event in the event handler. 

handleChange = (event, value) => {
  console.log(event); // 'Id' and 'name' attributes in 'target' are empty
  this.setState({ value });
};

render() {
  const { classes } = this.props;
  const { value } = this.state;

  return (
    <div className={classes.root}>
      <Typography id="label">Slider label</Typography>
      <Slider
        classes={{ container: classes.slider }}
        value={value}
        aria-labelledby="label"
        onChange={this.handleChange}
      />
    </div>
  );
}

This is fetched from the official demo project:

https://codesandbox.io/s/4j9l9xn1o4

Any help would be greatly appreciated!

conciliator
  • 6,078
  • 6
  • 41
  • 66

2 Answers2

6

You can format your state like so:

state = {
  slider1: 50, //slider1 is the name of the first slider
  slider2: 50, //slider2 is the name of the second slider
}

After that, you have 2 ways to set the state when the value of the slider is changed:

  • (Update: This method doesn't work! However I will leave it here for future reference) By using HTML attribute id, then access it by using event.target.id. The whole handleChange method would look like this:

    handleChange = (e, value) => {
  this.setState({
    [e.target.id]: value
  });
}

  • By passing then name of the slider straight to the handleChange method, and it would be like this:

    handleChange = name => (e, value) => {
  this.setState({
    [name]: value
  });
}

Overall, your component should be:

class SimpleSlider extends Component {
  state = {
    slider1: 50,
    slider2: 50
  };

  handleChange = name => (e, value) => {
    this.setState({
      [name]: value // --> Important bit here: This is how you set the value of sliders
    });
  };

  render() {
    const { classes } = this.props;
    const { slider1, slider2 } = this.state;

    return (
      <div className={classes.root}>
        <Typography id="label">Slider label</Typography>
        <Slider
          classes={{ container: classes.slider }}
          value={slider1}
          aria-labelledby="label"
          onChange={this.handleChange("slider1")}
        />
        <Slider
          classes={{ container: classes.slider }}
          value={slider2}
          aria-labelledby="label"
          onChange={this.handleChange("slider2")}
        />
      </div>
    );
  }
}

See it in action: https://codesandbox.io/s/4qz8o01qp4

Edit: After running the code I found that the #1 doesn't work because the id attribute is not being passed down to the event target

Brian Le
  • 2,646
  • 18
  • 28
  • Thanks man! I don't quite understand why I couldn't get that to work earlier, but I'll investigate this further. – conciliator Dec 04 '18 at 12:26
  • Make sure you have a careful look at the handleChange function @conciliator. It is written in the curry form – Brian Le Dec 04 '18 at 12:48
  • Thanks again - it works perfectly. And thanks for the tip on curry form. I've got to study that closer. – conciliator Dec 04 '18 at 20:00
0

You can pass a name prop to the slider component. This can be accessed using event.target.name

class MySlider extends Component {
  handleChange  => (e: React.ChangeEvent<HTMLInputElement>, values: number | number[]) => {
    if (Array.isArray(values)) {
                sliderChanged(e.target.name, values[0], values[1]);
            }
    });
  };

  render() {
    const { classes } = this.props;
    const { slider1, slider2 } = this.state;

    return (
      <div className={classes.root}>
        <Typography id="label">Slider label</Typography>
        <Slider
          classes={{ container: classes.slider }}
          value={slider1}
          aria-labelledby="label"
          onChange={this.handleChange("slider1")}
        />
        <Slider
          name={"pass name here"}
          value={[
                        minValue != null ? minValue : 0,
                        maxValue != null ? maxValue : 1,
                    ]}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}
OOrvi
  • 1
  • 1