React Material-UI slider value keeps resetting to zero

I am building an interface where you choose a radio and it will reveal different form elements.

When a slider is revealed the value change gets set into an object that is rendered on the page.

In this example I have it so it does update the object but the slider no longer moves even though the value is getting correctly set if you click on the line.

https://codesandbox.io/s/shy-dawn-e5zyu

The object I am setting is declared in the parent :

  const defaultActivity = {
    group: "",
    a: 0,
    b: 0
  };

  const [activity, setActivity] = useState(defaultActivity);

Then in the child component that contains the slider the handleChange function is use within that component and I also use a parent function to access setActivity.

const TestSlider = (props) => {
  const [value, setValue] = React.useState(0);
  const handleChange = (event, newValue) => {
    setValue(newValue);

// This sets the slider value to the activity object
// if you comment this line out then the sliders slide correctly

props.onDataChanged(props.name.toLowerCase(), newValue);

  };
  return (
    <React.Fragment>
      <Typography id="discrete-slider" gutterBottom>
        {props.name}
      </Typography>
      <Slider
        value={value}
        aria-labelledby="discrete-slider"
        valueLabelDisplay="auto"
        step={props.step}
        marks
        min={0}
        max={props.max}
        name={props.name}
        onChange={handleChange}
      />
    </React.Fragment>
  );
};

And that onDataChanged method in the parent


  const onDataChanged = (name, value) => {
    setActivity({
      ...activity,
      [name]: value
    });
  };

As I noted in the comment there, if you remove the onDataChanged method then the sliders work again. I have tried moving handleChange to the parent as well but that did not help.

After creating this Sandbox I seem to have a new problem that is sporadic and unclear to me steps to replicate where I am getting the error :
Cannot read property 'getBoundingClientRect' of null

Maybe related to broken slider issue or something else I screwed up. Thanks in advance for any help with this, I am trying hard to learn my way around React but this problem has me really stumped.

============= UPDATE: Closer to expected and a new problem =============

Still playing with this and decided to try and use onChangeCommitted on the slider to try and disconnect the value getting set in the slider with it getting set to the main object. Now it slides and updates the value which sticks in the object but gets reset to 0 for the slider UI. Hard to explain so maybe easier if you go play with it and see what I mean. I think the way I am setting the default state is probably the issue but not sure how to refactor this :

https://codesandbox.io/s/sleepy-euler-0dv69?file=/src/TestSlider.js:116-163

136 thoughts on “React Material-UI slider value keeps resetting to zero”

  1. Greetings! I’ve been reading your website
    for a while now and finally got the bravery to go ahead and give you
    a shout out from Atascocita Tx! Just wanted to tell you keep
    up the good job!

    Reply
  2. You really make it seem really easy along with your presentation however I to find this matter to be really
    something that I believe I’d never understand.
    It kind of feels too complicated and very vast for me.
    I’m looking forward for your subsequent post, I’ll
    try to get the hold of it!

    Reply
  3. Appreciating the commitment you put into your site and detailed information you present.

    It’s awesome to come across a blog every once in a while that isn’t the same old
    rehashed information. Great read! I’ve bookmarked your site and
    I’m adding your RSS feeds to my Google account.

    Reply
  4. You really make it seem really easy together with your presentation however I to find this matter to be really one thing which I feel I might never understand. It seems too complex and extremely broad for me. I’m having a look ahead to your subsequent post, I will try to get the hold of it!

    Reply
  5. I journal usually and I greatly treasure your content. This amazing article has seriously peaked my rate of interest. I am likely going to book mark your website as well as keep checking for new details with regards to once a week. I opted in for your RSS feed too.

    Reply
  6. Hi there! This post could not be written any better! Reading through this post reminds me of my previous room mate! He always kept chatting about this. I will forward this article to him. Fairly certain he will have a good read. Thanks for sharing!

    Reply

Leave a Comment