控制材质-更改时的ui滑块最大值和最小值

Question

我正在使用material-ui.com的slider component来选择价格范围。

如何避免最小值不大于最大值？我希望避免在它们之间移动选取器。

export default function CustomizedSlider() {
  const classes = useStyles();
  const [startPrice, setStartPrice] = React.useState(1000000)
  const [endPrice, setEndPrice] = React.useState(10000000)

  const handleChange = (event, value) => {
    setStartPrice(value[0])
    setEndPrice(value[1])
  }

  return (
      <Card>
        <AirbnbSlider
          ThumbComponent={ChevronLeftIcon}
          getAriaLabel={(index) => (index === 0 ? 'Minimum price' : 'Maximum price')}
          min={100}
          max={100000000}
          defaultValue={[startPrice, endPrice]}
          onChangeCommitted={handleChange}
          onChange={handleOnChange}
          step={100}
        />
      </Card>
  );
}

Answer 1

您可以在更改之前保存该值。现在检查旧值和新值。当这两个值更改时，滑块会重叠，您可以返回函数。

我编辑了材料示例：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Slider from '@material-ui/core/Slider';

const useStyles = makeStyles({
    root: {
        width: 300,
    },
});

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

let beforeChange = null;

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

    const handleChange = (event, newValue) => {
        if (!beforeChange) {
            beforeChange = [...value];
        }

        if (beforeChange[0] !== newValue[0] && beforeChange[1] !== newValue[1]) {
            return;
        }
        
        setValue(newValue);
    };

    const handleChangeCommitted = () => {
        beforeChange = null;
    };

    return (
        <div className={classes.root}>
            <Typography id="range-slider" gutterBottom>
                Temperature range
      </Typography>
            <Slider
                value={value}
                onChange={handleChange}
                onChangeCommitted={handleChangeCommitted}
                valueLabelDisplay="auto"
                aria-labelledby="range-slider"
                getAriaValueText={valuetext}
            />
        </div>
    );
}