React中MUI Range Slider数值分离及屏幕展示方法问询

你当前直接渲染数组状态val时，React会将数组元素自动拼接成字符串（若样式导致逗号被隐藏，就会出现类似2080的合并显示）。要分开展示最小值和最大值，只需直接访问数组索引即可：

修改后的关键代码 #

const ProductList = () => {
  const [val, setVal] = useState([20, 80])
  const updateVal = (e, item) => {
    setVal(item)
  }
  function valuetext(value) {
    return `${value}°C`;
  }

  return (
    <Container>
      <Left>
        <Texthead>Filters</Texthead>
        <Line />
        <Text>Price</Text>
        <SliderContainer>
          <Slider style={{width:"200px"}}
            value={val}
            max={100}
            onChange={updateVal}
            getAriaValueText={valuetext}
            valueLabelDisplay="auto"
          />
        </SliderContainer>
        
        <Line />
        {/* 分别渲染最小值和最大值 */}
        <Text>最小值: {val[0]}</Text>
        <Text>最大值: {val[1]}</Text>
        <Text>Discount % </Text>
      </Left>
    </Container>
  )
}

说明 #

1. 通过val[0]获取范围滑块的最小值，val[1]获取最大值，这样就能在页面上独立展示两个数值，避免合并问题。
2. 移除了代码中多余的ival和fval变量，直接使用状态变量val即可，简化代码逻辑。

内容的提问来源于stack exchange，提问作者Shubham Jain