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

user_2659696 0
Viewed 1812

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
material-ui reactjs javascript
3 Answers

You have to combine your examples:

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

Why not just make a second state for committed change?

See sandbox

Edit: Code below.

Add state for range commit:

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

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

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

Add range commit handler prop in addition to onChange:

   onChange={handleChange}
   onChangeCommitted={setVal2}

Display commited state:

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

Use onUpdate!

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

user_39150590
Related