I'm trying to find a way how to update the new state only on mouse release for a Material UI slider. While maintaining the ability to slide over the track and see the change in real-time.

Material UI provides 2 events: onChange and onChangeCommitted. The second provides the end result that I need, but the sliding trough the track is not visible in real-time, only at mouse release you see at what value you stopped. Here is my ponent:

export default function RangeSlider() {
  const classes = useStyles();
  const [range, setRange] = React.useState([0, 37]);

  const handleRange = (event, newValue) => {
    setRange(newValue);
  };

  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Temperature range (onChangeCommitted event)
      </Typography>
      <Slider
        value={range}
        min={0}
        max={50}
        onChangeCommitted={handleRange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
      />
    </div>
  );
}

I want to find a way to have the ability to slide in real-time, and the state to be updated on mouse release. Is there an easy way to do this?

Please also check out this Sandbox, where I show you the 2 examples:

1. First is the sliding experience I need
2. Second is the way to update state

I'm trying to find a way how to update the new state only on mouse release for a Material UI slider. While maintaining the ability to slide over the track and see the change in real-time.

Material UI provides 2 events: onChange and onChangeCommitted. The second provides the end result that I need, but the sliding trough the track is not visible in real-time, only at mouse release you see at what value you stopped. Here is my ponent:

export default function RangeSlider() {
  const classes = useStyles();
  const [range, setRange] = React.useState([0, 37]);

  const handleRange = (event, newValue) => {
    setRange(newValue);
  };

  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Temperature range (onChangeCommitted event)
      </Typography>
      <Slider
        value={range}
        min={0}
        max={50}
        onChangeCommitted={handleRange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
      />
    </div>
  );
}

I want to find a way to have the ability to slide in real-time, and the state to be updated on mouse release. Is there an easy way to do this?

Please also check out this Sandbox, where I show you the 2 examples:

1. First is the sliding experience I need
2. Second is the way to update state

• javascript
• reactjs
• material-ui

• I don't understand, the first one works fine. What are you asking? Are you trying to fire a callback from a parent ponent when onChangeCommitted occurs? It's not clear. – Adam Jenkins Commented Sep 30, 2020 at 18:30

3 Answers 3

You have to bine your examples:

   <Slider
    value={value}
    min={0}
    max={50}
    onChange={handleChange}
    onChangeCommitted={handleRange}
    valueLabelDisplay="auto"
    getAriaValueText={valuetext}
  />

Why not just make a second state for mitted change?

See sandbox

Edit: Code below.

Add state for range mit:

const [value2, setValue2] = React.useState([0, 37]);

On range mit handler (note: I am setting to the current state, unrelated to the mouse event this function gives me):

const setVal2 = () => setValue2(value);

Add range mit handler prop in addition to onChange:

   onChange={handleChange}
   onChangeCommitted={setVal2}

Display mited state:

    <Typography id="range-slider" gutterBottom>
        Temperature range (onChange event) - {value2[0]}:{value2[1]}
    </Typography>

Use onUpdate!

onChange() triggers mouse release onUpdate() triggers every change even when dragging...