Range 区段选择器

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

区间选择

何时使用

滑块控件(Sliders，简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边，对应的，最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

使用注意

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

  • onProcess不建议内部做setState 进行受控，因为会频繁触发，整个滑动过程中会一直触发。

API

Range

参数说明类型默认值
slider滑块个数可选值:'single'(单个)'double'(两个)Enum'single'
min最小值Number0
max最大值Number100
step步长，取值必须大于 0，并且可被 (max - min) 整除。Number1
value设置当前取值。当 slider 为 single 时，使用 Number，否则用 [Number, Number]Number/Array<Number>-
defaultValue设置初始取值。当 slider 为 single 时，使用 Number，否则用 [Number, Number]Number/Array<Number>-
marks刻度数值显示逻辑（false 代表不显示，array 枚举显示的值，number 代表按 number 平分，object 表示按 key 划分，value 值显示）Boolean/Number/Array<Number>/Objectfalse
marksPositionmarks显示在上方('above')or下方('below')可选值:'above', 'below'Enum'above'
disabled值为 true 时，滑块为禁用状态Booleanfalse
onChange当 Range 的值发生改变后，会触发 onChange 事件，并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用签名:Function(value: String/number) => void参数:value: {String/number} nullFunctionfunc.noop
onProcess滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用签名:Function(value: String/number) => void参数:value: {String/number} nullFunctionfunc.noop
hasTip是否显示 tipBooleantrue
tipRender自定义 tip 显示内容签名:Function(value: Number/String) => ReactNode参数:value: {Number/String} 值返回值:{ReactNode} 显示内容Functionvalue => value
reverse选中态反转Booleanfalse
pure是否pure renderBooleanfalse
fixedWidth是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间Booleanfalse
tooltipVisibletooltip是否默认展示Booleanfalse
rtl是否已rtl模式展示Booleanfalse

ARIA and KeyBoard

按键说明
Right Arrow控制滑块往右移动
Left Arrow控制滑块向左移动
Tab切换滑动条

代码示例

基本

基本滑块，当 slider 为 double 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。

Range 区段选择器 - 图1

查看源码在线预览

  1. import { Range } from '@alifd/next';
  4. const style = {
  5.     marginBottom: '15px'
  6. };
  8. ReactDOM.render(<div style={{width: '400px', margin: '50px'}}>
  9.         <h4>single slider - from left to right</h4>
  10.         <Range defaultValue={30} style={style} hasTip={false} />
  11.         <h4>single slider - from right to left</h4>
  12.         <Range defaultValue={30} style={style} reverse hasTip={false} />
  13.         <h4>double slider - from outside to inside</h4>
  14.         <Range slider={'double'} defaultValue={[20, 40]} style={style} />
  15.         <h4>double slider - from inside to outside</h4>
  16.         <Range slider={'double'} defaultValue={[20, 40]} style={style} reverse />
  17.         <h4>Disabled</h4>
  18.         <Range defaultValue={30} disabled style={style} />
  19.         <h4>Disabled</h4>
  20.         <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} />
  21.         <h4>tooltipVisible disabled</h4>
  22.         <Range disabled tooltipVisible defaultValue={60} style={style} />
  23.         <h4>tooltipVisible</h4>
  24.         <Range tooltipVisible defaultValue={60} style={style} />
  25.         <h4>tooltipVisible disabled</h4>
  26.         <Range disabled tooltipVisible slider={'double'} defaultValue={[57, 77]} style={style} />
  27.         <h4>tooltipVisible</h4>
  28.         <Range tooltipVisible slider={'double'} defaultValue={[57, 77]} style={style} />
  29.     </div>, mountNode);

固定宽度滑动

默认双滑块(slider 为 double)，且指定 defaultValue为区间值下可用。范围不可被改变，拖动所选区域改变始末滑块位置。

Range 区段选择器 - 图2

查看源码在线预览

  1. import { Range } from '@alifd/next';
  3. const style = {
  4.     marginBottom: '15px'
  5. };
  7. const styleX3 = {
  8.     marginBottom: '45px'
  9. };
  11. class App extends React.Component {
  12.     constructor(props) {
  13.         super(props);
  14.         this.state = {
  15.             value: [10, 300]
  16.         };
  18.     }
  20.     //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding
  21.     onChange(value) {
  22.         console.log('onChange value:', value);
  23.         this.setState({value});
  24.     }
  26.     // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.
  27.     onProcess(value) {
  28.         // this.setState({value});
  29.         console.log('onProcess: ', value);
  30.     }
  32.     render() {
  33.         return (
  34.             <div style={{width: '400px', margin: '50px'}}>
  35.                 <h4>fixedWidth basic</h4>
  36.                 <Range fixedWidth defaultValue={[20, 40]} style={style} />
  37.                 <h4>fixedWidth basic with tooltipVisible</h4>
  38.                 <Range tooltipVisible fixedWidth defaultValue={[70, 90]} style={styleX3} />
  39.                 <Range disabled tooltipVisible fixedWidth defaultValue={[70, 90]} style={style} />
  40.                 <h4>fixedWidth with marks</h4>
  41.                 <Range fixedWidth step={10} defaultValue={[20, 40]} scales={10} marks={10} style={styleX3} />
  42.                 <Range fixedWidth step={2} defaultValue={[60, 80]} scales={[0, 100]} marks={[0, 30, 100]} style={style} marksPosition="below" />
  43.                 <h4>fixedWidth with 0.01 step</h4>
  44.                 <Range fixedWidth defaultValue={[0.6, 0.7]} min={0.5} max={1} step={0.01}/>
  45.                 <div style={{width: '400px', marginTop: '50px'}}>
  46.                     <p>range 0 ~ 1024</p>
  47.                     <Range fixedWidth value={this.state.value}
  48.                         onChange={this.onChange.bind(this)}
  49.                         onProcess={this.onProcess.bind(this)}
  50.                         min={0} max={1024} marks={[0, 1024]} />
  51.                 </div>
  52.             </div>
  53.         );
  54.     }
  56. }
  58. ReactDOM.render(<App />, mountNode);

刻度及标识

通过 scales 与 marks 属性设置刻度及标识。

Range 区段选择器 - 图3

查看源码在线预览

  1. import { Range } from '@alifd/next';
  3. const style = {
  4.     marginBottom: '20px',
  5.     marginTop: '20px'
  6. };
  8. ReactDOM.render(<div style={{width: '400px', margin: '50px'}}>
  9.         <p>With minimal and maximal value</p>
  10.         <Range defaultValue={0} marks={[0, 100]} style={style} />
  11.         <Range slider={'double'} defaultValue={[20, 40]} scales={[0, 100]} marks={[0, 100]} style={style} />
  12.         <Range defaultValue={30} style={style} />
  13.         <p>Below</p>
  14.         <Range defaultValue={0} marks={[0, 100]} style={style} marksPosition="below" />
  15.         <Range slider={'double'} defaultValue={[20, 40]} scales={[0, 100]} marks={[0, 100]} style={style} marksPosition="below" />
  16.         <Range defaultValue={30} scales={[0, 100]} marks={[0, 100]} style={style} marksPosition="below" />
  17.         <p>Equal division</p>
  18.         <Range defaultValue={30} marks={5} style={style} />
  19.         <Range slider={'double'} defaultValue={[20, 40]} scales={10} marks={10} style={style} />
  20.         <Range disabled slider={'double'} defaultValue={[20, 40]} scales={10} marks={10} style={style} />
  21.         <p>Free</p>
  22.         <Range defaultValue={30} marks={[0, 26, 37, 100]} style={style} />
  23.         <Range slider={'double'} defaultValue={[20, 40]} marks={[0, 26, 37, 100]} style={style} hasTip={false}/>
  24.         <Range defaultValue={30} marks={{0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C'}} style={style} />
  25.     </div>, mountNode);

min,max,step

可以通过 min 与 max 设置范围边界。通过 step(被 max - min 整除) 设置移动的最小步频。min默认为0,max默认为100.

Range 区段选择器 - 图4

查看源码在线预览

  1. import { Range } from '@alifd/next';
  3. const style = {
  4.     marginBottom: '40px',
  5.     marginTop: '40px'
  6. };
  7. ReactDOM.render(
  8.     <div style={{width: '400px', margin: '50px'}}>
  9.         <p>Range 0 ~ 1024</p>
  10.         <Range defaultValue={128} min={0} max={1024} marks={[0, 1024]} style={style} />
  11.         <p>Range 0 ~ 1024，step 128</p>
  12.         <Range defaultValue={512} min={0} max={1024} step={128} marks={[0, 1024]}
  13.             style={style} />
  14.     </div>
  15. , mountNode);

事件

onChange,onProcess事件

Range 区段选择器 - 图5

查看源码在线预览

  1. import { Range } from '@alifd/next';
  3. class App extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  6.         this.state = {
  7.             value: 128,
  8.             value2: 300,
  9.             doubleValue: [200, 300]
  10.         };
  12.     }
  14.     //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding
  15.     onChange(value) {
  16.         console.log('onChange value:', value);
  17.         this.setState({value});
  18.     }
  20.     // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.
  21.     onProcess(value) {
  22.         console.log('onProcess: ', value);
  23.     }
  25.     onChangeDouble(doubleValue) {
  26.         console.log('onChange doubleValue:', doubleValue);
  27.         this.setState({doubleValue});
  28.     }
  30.     onProcessDouble(doubleValue) {
  31.         console.log('onProcess: ', doubleValue);
  32.     }
  34.     render() {
  35.         return (
  36.             <div style={{width: '400px', margin: '50px'}}>
  37.                 <p>range 0 ~ 1024</p>
  38.                 <div style={{width: '400px', marginTop: '50px'}}>
  40.                     <Range value={this.state.value} onChange={this.onChange.bind(this)}
  41.                         onProcess={this.onProcess.bind(this)}
  42.                         min={0} max={1024} marks={[0, 1024]} />
  43.                 </div>
  45.                 <p>with value and without onChange</p>
  46.                 <div style={{width: '400px', marginTop: '50px'}}>
  48.                     <Range value={this.state.value2}
  49.                         onProcess={this.onProcess.bind(this)}
  50.                         min={0} max={1024} marks={[0, 1024]} />
  51.                 </div>
  54.                 <p>double slider controlled</p>
  55.                 <div style={{width: '400px', marginTop: '50px'}}>
  57.                     <Range slider="double" value={this.state.doubleValue} onChange={this.onChangeDouble.bind(this)}
  58.                         onProcess={this.onProcessDouble.bind(this)}
  59.                         min={0} max={1024} marks={[0, 1024]} />
  60.                 </div>
  61.             </div>
  62.         );
  63.     }
  65. }
  67. ReactDOM.render(<App />, mountNode);

范围与 step

与number-picker结合,外部控制,与Icon结合设置边界Icon

Range 区段选择器 - 图6

查看源码在线预览

  1. import { Range, NumberPicker, Grid, Icon } from '@alifd/next';
  5. const {Row, Col} = Grid;
  7. class Demo extends React.Component {
  8.     constructor(props, context) {
  9.         super(props, context);
  10.         this.state = {
  11.             valueInt: 3,
  12.             valueDec: 0.05,
  13.             valueIcon: 1,
  14.             preIconClass: '',
  15.             afterIconClass: ''
  16.         };
  18.     }
  20.     onChangeInt(value) {
  21.         console.log(value);
  22.         this.setState(Object.assign({}, this.state, {
  23.             valueInt: value
  24.         }));
  25.     }
  27.     onChangeDec(value) {
  29.         this.setState(Object.assign({}, this.state, {
  30.             valueDec: value
  31.         }));
  32.     }
  34.     onIconRangeProcess(value) {
  35.         const mid = 50;
  36.         this.setState(Object.assign({}, this.state, {
  37.             valueIcon: value,
  38.             preIconClass: value < mid ? 'myicon-highlight' : '',
  39.             afterIconClass: value >= mid ? 'myicon-highlight' : ''
  40.         }));
  41.     }
  43.     render() {
  44.         return (
  45.             <div style={{width: '400px', margin: '50px'}}>
  46.                 <h2>Used with numberPicker</h2>
  47.                 <Row>
  48.                     <Col span="12" style={{marginTop: '10px'}}>
  49.                         <Range value={this.state.valueInt} min={0} max={20} step={1}
  50.                             onChange={this.onChangeInt.bind(this)} />
  51.                     </Col>
  52.                     <Col span="12">
  53.                         <NumberPicker value={this.state.valueInt} min={0} max={1024} step={1}
  54.                             onChange={this.onChangeInt.bind(this)} />
  55.                     </Col>
  56.                 </Row>
  57.                 <br />
  58.                 <Row>
  59.                     <Col span="12" style={{marginTop: '10px'}}>
  60.                         <Range value={this.state.valueDec} min={0} max={1} step={0.01}
  61.                             onChange={this.onChangeDec.bind(this)} />
  62.                     </Col>
  63.                     <Col span="12">
  64.                         <NumberPicker value={this.state.valueDec} min={0} max={1} step={0.01}
  65.                             onChange={this.onChangeDec.bind(this)} />
  66.                     </Col>
  67.                 </Row>
  68.                 <h2>Used with Icon</h2>
  70.                 <div className="iconWrapper">
  71.                     <Icon className={`myicon ${this.state.preIconClass}`} type="cry" />
  72.                     <Range min={1} max={100} onChange={this.onIconRangeProcess.bind(this)} value={this.state.valueIcon} />
  73.                     <Icon className={`myicon ${this.state.afterIconClass}`} type="smile" />
  74.                 </div>
  75.             </div>
  76.         );
  77.     }
  80. }
  82. ReactDOM.render(<Demo />, mountNode);
  1. .iconWrapper {
  2.   position: relative;
  3.   padding: 0px 40px;
  4. }
  6. .iconWrapper .myicon {
  7.   position: absolute;
  8.   top: -3px;
  9.   width: 16px;
  10.   height: 16px;
  11.   line-height: 1;
  12.   font-size: 16px;
  13.   color: #ccc;
  14. }
  16. .iconWrapper .myicon:first-child {
  17.   left: 0;
  18. }
  20. .iconWrapper .myicon:last-child {
  21.   right: 0;
  22. }
  24. .myicon.myicon-highlight {
  25.   color: #666;
  26. }

tipRender

tipRender 示例

Range 区段选择器 - 图7

查看源码在线预览

  1. import { Range } from '@alifd/next';
  3. class App extends React.Component {
  4.     constructor(props) {
  5.         super(props);
  6.         this.state = {
  7.             value: 128
  8.         };
  10.     }
  12.     // This callback will be triggered when startValue and endValue aren't equal after moving.
  13.     onChange(value) {
  14.         console.log('onChange value:', value);
  15.     }
  17.     // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You can call setState here when using a controlled component.
  18.     onProcess(value) {
  19.         console.log('onProcess');
  20.         this.setState({value});
  21.     }
  23.     formatter(value) {
  24.         return `$${value}`;
  25.     }
  26.     render() {
  27.         return (
  28.             <div style={{width: '400px', margin: '50px'}}>
  29.                 <p>Range 0 ~ 1024</p>
  30.                 <div style={{width: '400px', marginTop: '50px'}}>
  32.                     <Range defaultValue={256} tipRender={this.formatter.bind(this)} value={this.state.value} onChange={this.onChange.bind(this)}
  33.                         onProcess={this.onProcess.bind(this)}
  34.                         min={0} max={1024} marks={[0, 1024]} />
  35.                 </div>
  36.             </div>
  37.         );
  38.     }
  40. }
  42. ReactDOM.render(<App />, mountNode);

选择态反转

设置reverse为true, 选中态会反转。

Range 区段选择器 - 图8

查看源码在线预览

  1. import { Range } from '@alifd/next';
  4. const style = {
  5.     marginBottom: '15px'
  6. };
  8. ReactDOM.render(
  9.     <div style={{width: '400px', margin: '50px'}}>
  10.         <Range defaultValue={30} style={style} hasTip={false} />
  11.         <Range defaultValue={30} style={style} reverse hasTip={false} />
  12.         <Range slider={'double'} defaultValue={[20, 40]} style={style} />
  13.         <Range slider={'double'} defaultValue={[20, 40]} style={style} reverse />
  14.         <Range defaultValue={30} disabled style={style} />
  15.         <Range defaultValue={30} disabled style={style} reverse />
  16.         <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} />
  17.         <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} reverse />
  18.     </div>, mountNode);

无障碍

通过Tab键或其他方式使滑块被聚焦之后，可以通过按下键盘的左右箭头来改变滑块的位置，目前只有单滑块支持无障碍。

Range 区段选择器 - 图9

查看源码在线预览

  1. import { Range } from '@alifd/next';
  4. const style = {
  5.     marginBottom: '15px'
  6. };
  8. ReactDOM.render(<div style={{width: '400px', margin: '50px'}}>
  9.         <h4>single slider - from left to right</h4>
  10.         <Range defaultValue={30} style={style} hasTip={false} />
  11.         <h4>single slider - from right to left</h4>
  12.         <Range defaultValue={30} style={style} reverse hasTip={false} />
  13.     </div>, mountNode);

相关区块

Range 区段选择器 - 图10

暂无相关区块