Material UI Slider conditional logic

1

Hello all,

I am trying to build a music app with React and Material UI. I have a Slider component to help control volume. After the volume gets over 80 I want it to display a notification to the user saying that listening to music at a high volume can cause hearing loss. I have the input from the Slider component stores in this.state.value.

The problem I have though is when I track the onChange event in the console it gives me a ton of different numbers for the MouseEvent. Like screenX, screenY, clientX, and clientY to name a few. I’m not entirely sure which one of these properties I need to grab and use in my conditional logic. I was wondering if someone with experience in Material UI Slider components could help me out. I can post code to give a clearer picture once I’m back at my computer if y’all need it. Thanks.

2

Looking at the first examples in the docs can you not just look at the value pass to the handler?

const handleChange = (event, newValue) => {
  console.log(newValue)
  setValue(newValue);
};