如何在不影响拖拽功能的情况下反转MUI Slider的数值？

你的问题出在只对滑块的显示值做了反转，但没有同步处理拖拽时的数值转换，导致操作逻辑和视觉显示错位。直接修改onChange回调里的数值处理逻辑就能解决：

1. 调整handleSelectionChange函数，根据overUnder状态反转滑块返回的数值：

const handleSelectionChange = (e: any, value: number | number[]) => {
  // 单滑块场景下取数值，多滑块可根据需求调整
  const rawValue = typeof value === 'number' ? value : value[0];
  // 对应value属性的反转逻辑，同步转换数值
  const finalValue = overUnder ? 100 - rawValue : rawValue;
  onChange(finalValue);
};

2. 注意MUI Slider的onChange回调第二个参数才是准确的滑块值，别再用e.target.value，组件的onChange直接绑定修改后的函数即可：

<Slider
  aria-label='DiceRoll'
  defaultValue={50}
  valueLabelDisplay='auto'
  step={1}
  min={0}
  max={100}
  value={overUnder ? 100 - targetNumber : targetNumber}
  marks={marks}
  onChange={handleSelectionChange}
/>

这样处理后，滑块的视觉显示和拖拽操作逻辑就一致了：当overUnder为true时，拖动滑块向左（向0方向），实际更新的targetNumber会向100增长，和滑块显示的100-targetNumber变化匹配。

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