Material-UI: How to get the value in Slider?

Issue

I’m using Material-UI Slider and I want to get the value with onChange function.

My code is like this:

const SliderScale: React.FC = () => {
  const classes = useStyles();
  const [inputValue, setInputValue] = useState(0);

  const updateRange = (value: number) : void => {
    setInputValue(value);
  };


  return (
    <div className={classes.root}>
      <Typography id="discrete-slider" gutterBottom>
        value
      </Typography>
      <Slider
        defaultValue={0}
        value={inputValue}
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider"
        valueLabelDisplay="on"
        step={0.5}
        marks={false}
        min={0}
        max={10}
        onChange={updateRange}
      />
    </div>
  );
};

export default SliderScale;

this doesn’t work and show this error.

(JSX attribute) onChange?: ((event: React.ChangeEvent<{}>, value: number | number[]) => void) | undefined
No overload matches this call.
Overload 1 of 2, ‘(props: { component: ElementType; } & { ‘aria-label’?: string | undefined; ‘aria-labelledby’?: string | undefined; ‘aria-valuetext’?: string | undefined; color?: "primary" | "secondary" | undefined; … 18 more …; valueLabelFormat?: string | … 1 more … | undefined; } & CommonProps<…> & Pick<…>): Element’, gave the following error.
Type ‘(value: number) => void’ is not assignable to type ‘(event: ChangeEvent<{}>, value: number | number[]) => void’.
Types of parameters ‘value’ and ‘event’ are incompatible.
Type ‘ChangeEvent<{}>’ is not assignable to type ‘number’.
Overload 2 of 2, ‘(props: DefaultComponentProps<SliderTypeMap<{}, "span">>): Element’, gave the following error.

Does anyone know how to get it?

Solution

The onChange signature from the docs is:

function(event: object, value: number | number[]) => void

The new value is in the second parameter, not the first one of onChange callback. Change your code to this:

<Slider {...props} onChange={(_, value) => setInputValue(value)} />

Answered By – NearHuscarl

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0