display: Range family: Form

Range

滑动输入条

API

Props

| 名称 | 说明 | 类型 | 默认值 | | :------------- | :----------------------------------------------------------------- | :-------------- | :----- | | min | 最小值 | number | 0 | | max | 最大值 | number | 100 | | step | 步长 | number | 1 | | value | 值 | number/number[] | 0 | | count | 拇指的个数, 1 或 2 | number | 1 | | defaultValue | 默认值 | number/number[] | 0 | | disabled | 是否禁用 | boolean | false | | readOnly | 只读模式 | boolean | false | | marks | 需要显示的数值标签 | object | {} | | tooltipVisible | 是否显示气泡提示,true一直显示，false一直不显示，默认拖动时显示 | boolean | | | onChange | 拖动结束的回调 | (value) => void | noop | | onMove | 拖动过程的回调，尽量避免在这里 setState | (value) => void | |

CSS API

| 名称 | 说明 | | :--------------------------------- | :----------------------------------- | | range | 最外层样式 | | range__track | 轨道的样式 | | range--disabled__track | 禁用时轨道的样式 | | range__track--selected | 选中的轨道样式 | | range--disabled__track--selected | 禁用时选中部分的样式 | | range__thumb | 拇指的样式 | | range__thumb--active | 拖动时拇指的样式 | | range__mark | 刻度线的样式 | | range--disabled__mark | 禁用时刻度线的样式 | | range__mark--active | 刻度线在选中范围的样式 | | range--disabled__mark--active | 禁用状态下刻度线在选中范围的样式 | | range__label | 刻度线文案的样式 | | range--disabled__label | 禁用时刻度线文案的样式 | | range__label--active | 刻度线文案在选中范围的样式 | | range--disabled__label--active | 禁用状态下刻度线文案在选中范围的样式 | | range__tooltip | 气泡的样式 | | range__arrow | 气泡箭头的样式 |