React中range滑块未默认显示min与max中间值的问题

React里的range类型input不会像原生HTML那样自动把默认值设为min和max的中间值，而是默认用50当初始值——哪怕你设置了min=0、max=150，只要没显式指定初始值，它就会用50。

这是因为React在处理非受控的range组件时，不会触发浏览器原生的默认值计算逻辑，而是使用自己的默认初始值。而原生HTML中，浏览器会自动帮你计算min和max的中间值作为默认值。

解决方法很简单，给input加上defaultValue属性，指定中间值75就行：

// Slider.tsx
const Slider = () => {
  return (
    <>
      <input type="range" min="0" max="150" defaultValue="75" />
    </>
  );
};

export default Slider;

如果你的min和max是动态变量，也可以直接计算中间值：

const Slider = () => {
  const min = 0;
  const max = 150;
  return (
    <>
      <input 
        type="range" 
        min={min} 
        max={max} 
        defaultValue={(min + max) / 2} 
      />
    </>
  );
};

这样滑块的初始值就会和原生HTML一样，是min和max的中间值了。

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