滑块的打印值

Question

我有一个滑块，想让它打印/显示其当前值，但我不知道该怎么做。

我知道 material.ui 滑块具有 Prop valueLabelDisplay，但出于我的目的，我希望将值显示在其他地方。

function valuetext(value) {
    return `${value}`;
  }

  export default function SliderBars() {
    const classes = useStyles();
    const [value, setValue] = React.useState([23, 37]);

    return (
      <div className={classes.root}>
        <Typography id="range-slider1" gutterBottom>
          Option 1
        </Typography>
        <Slider
          //value={value}
          min="0" max ="10" step = "1"
          valueLabelDisplay="auto"
          aria-labelledby="range-slider1"
          getAriaValueText={valuetext}
          defaultValue={5}
          marks
        />

Answer 1

如果我猜对了，你需要使用 Slider 的 onChange 事件，在此处查看：https://material-ui.com/api/slider/ 并执行以下操作：

...
onSliderChange = (val) => {
  setValue(val);
}


...
<div>{value}</div>
<Slider
      //value={value}
      min="0" max ="10" step = "1"
      valueLabelDisplay="auto"
      aria-labelledby="range-slider1"
      getAriaValueText={valuetext}
      defaultValue={5}
      onChange={(event, val) => this.onSliderChange(val)}
      marks
    />