Range 区段选择

使用场景

滑块控件可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。

注意事项：

• onChange 是和 value 进行配置做受控处理的。onChange 在滑动过程中不会触发，滑动停止后会触发。

示例

基本示例

inline

function Basic() { return ( <Range style={{ margin: 40 }} defaultValue={20} onChange={(nextValue) => { console.log('range onChange:', nextValue); }} /> ); }

function Basic() {
  return (
    <Range
      style={{ margin: 40 }}
      defaultValue={20}
      onChange={(nextValue) => {
        console.log('range onChange:', nextValue);
      }}
    />
  );
}

禁用状态

inline

function Disabled() { return <Range style={{ margin: 40 }} value={30} disabled />; }

function Disabled() {
  return <Range style={{ margin: 40 }} value={30} disabled />;
}

API

字段	描述
className	string
style	CSSProperties
min	number = 0 最小值
max	number = 100 最大值
step	number = 1 步长，取值必须大于 0，并且可被 (max - min) 整除
value	number 受控用法，当前值
defaultValue	number = 0 非受控用法，默认值
onChange	(value: number) => void 受控用法，当前值改变的回调，注意只有当鼠标松开的时候该函数才会被调用
disabled	boolean 是否禁用
hasTip	boolean = true 是否显示 tip