Material UI Slider component, update state on mouse release, while sliding in real time

Question

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 component:

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

Answer 1

You have to combine your examples:

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