如果分数为步长，则“材质”的Slider API无法正确呈现滑块。材质ui |滑块|反应

Question

我有一个React应用程序，将在其中添加Material UI滑块。但是我无法正确创建滑块。我不知道我身边缺少哪个财产。

这是我的React组件

import * as React from 'react';
import Slider from '@material-ui/core/Slider';

const marks = [
  {
    value: -1.5,
    label: '-1.5'
  },
  {
    value: -0.5,
    label: '-0.5'
  },
  {
    value: 0.5,
    label: '0.5'
  },
  {
    value: 1.5,
    label: '1.5'
  }
];

class SliderUi extends React.Component<any, any> {
  render() {
    return (
      <>
      <Slider
        defaultValue={1.5}
        aria-labelledby="discrete-slider-small-steps"
        step={1.0}
        marks={marks}
        min={-1.5}
        max={1.5}
        valueLabelDisplay="auto"
      />
      </>
    );
  }
}

如您所见，默认值为“ 1.5”，步长值为1，因此将1.5选为默认值。

加载上述组件后，将显示以下输出

，当我滑动滑块时，我将无法选择标记的值，例如1.5、0.5等。默认情况下，它可以正常工作，我只能选择-1、0和1（但我不希望这样做。用户只能选择标记的值，例如1.5、0.5等）

参考链接-Material Slider

万一有人要研究它，Sandbox link

Answer 1

好吧，如果要选择标记的值，则应将步骤设置为null 您可以按照

return (
  <>
  <Slider
    defaultValue={1.5}
    aria-labelledby="discrete-slider-small-steps"
    step={null}
    marks={marks}
    min={-1.5}
    max={1.5}
    valueLabelDisplay="auto"
  />
  </>
);

希望有帮助