Range 区段选择器

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

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

开发指南

区间选择

何时使用

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

使用注意

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

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

API

区段选择器

参数说明类型默认值
prefix样式类名的品牌前缀String'next-'
className自定义类名String-
style自定义内敛样式Object-
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
disabled值为 true 时，滑块为禁用状态Booleanfalse
onChange当 Range 的值发生改变后，会触发 onChange 事件，并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用签名:Function(value: String/number) => void参数:value: {String/number} nullFunction() => { }
onProcess滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用签名:Function(value: String/number) => void参数:value: {String/number} nullFunction() => { }
hasTip是否显示tipBooleantrue
tipFormattertip文件自定义处理签名:Function() => voidFunction(value) => { return value; }
reverse选中态反转Booleanfalse

代码示例

基本

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

Range 区段选择器 - 图1

查看源码在线预览

  1. import { Range } from "@icedesign/base";
  3. const style = {
  4.   marginBottom: "15px"
  5. };
  7. ReactDOM.render(
  8.   <div style={{ width: "400px", margin: "50px" }}>
  9.     <h4>单滑块-左向右</h4>
  10.     <Range defaultValue={30} style={style} hasTip={false} />
  11.     <h4>单滑块-右向左</h4>
  12.     <Range defaultValue={30} style={style} reverse hasTip={false} />
  13.     <h4>双滑块-从外到里</h4>
  14.     <Range slider={"double"} defaultValue={[20, 40]} style={style} />
  15.     <h4>双滑块-从里到外</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.   </div>,
  22.   mountNode
  23. );

事件

onChange,onProcess事件

Range 区段选择器 - 图2

查看源码在线预览

  1. import { Range } from "@icedesign/base";
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       value: 128,
  8.       doubleValue: [10, 30]
  9.     };
  10.   }
  12.   //受控使用, onChange,移动结束时,如果startValue和endValue不等,会触发这个事件
  13.   onChange(value) {
  14.     console.log("onChange value:", value);
  15.     this.setState({ value });
  16.   }
  18.   //mouseDown以及onMove的时候,如果startValue和endValue不等,会触发这个事件,不建议在这里做setState.
  19.   onProcess(value) {
  20.     this.setState({ value });
  21.     console.log("onProcess: ", value);
  22.   }
  24.   onChangeDouble(value) {
  25.     this.setState({
  26.       doubleValue: value
  27.     });
  28.   }
  29.   render() {
  30.     return (
  31.       <div style={{ width: "400px", margin: "50px" }}>
  32.         <p>范围 0 ~ 1024</p>
  33.         <div style={{ width: "400px", marginTop: "50px" }}>
  34.           <Range
  35.             value={this.state.value}
  36.             onChange={this.onChange.bind(this)}
  37.             onProcess={this.onProcess.bind(this)}
  38.             min={0}
  39.             max={1024}
  40.             marks={[0, 1024]}
  41.           />
  42.         </div>
  44.         <p>设了value受控后的,不设置onChange的状态</p>
  45.         <div style={{ width: "400px", marginTop: "50px" }}>
  46.           <Range
  47.             defaultValue={256}
  48.             value={300}
  49.             onProcess={this.onProcess.bind(this)}
  50.             min={0}
  51.             max={1024}
  52.             marks={[0, 1024]}
  53.           />
  54.         </div>
  56.         <p>double slider controlled</p>
  57.         <div style={{ width: "400px", marginTop: "50px" }}>
  58.           <Range
  59.             slider="double"
  60.             value={this.state.doubleValue}
  61.             onChange={this.onChangeDouble.bind(this)}
  62.             onProcess={this.onProcess.bind(this)}
  63.             min={0}
  64.             max={1024}
  65.             marks={[0, 1024]}
  66.           />
  67.         </div>
  68.       </div>
  69.     );
  70.   }
  71. }
  73. ReactDOM.render(<App />, mountNode);

范围与 step

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

Range 区段选择器 - 图3

查看源码在线预览

  1. import { Range, NumberPicker, Grid, Icon } from "@icedesign/base";
  3. const { Row, Col } = Grid;
  5. class Demo extends React.Component {
  6.   constructor(props, context) {
  7.     super(props, context);
  8.     this.state = {
  9.       valueInt: 3,
  10.       valueDec: 0.05,
  11.       valueIcon: 1,
  12.       preIconClass: "",
  13.       afterIconClass: ""
  14.     };
  15.   }
  17.   onChangeInt(value) {
  18.     console.log(value);
  19.     this.setState(
  20.       Object.assign({}, this.state, {
  21.         valueInt: value
  22.       })
  23.     );
  24.   }
  26.   onChangeDec(value) {
  27.     this.setState(
  28.       Object.assign({}, this.state, {
  29.         valueDec: value
  30.       })
  31.     );
  32.   }
  34.   onIconRangeProcess(value) {
  35.     let mid = 50;
  36.     this.setState(
  37.       Object.assign({}, this.state, {
  38.         valueIcon: value,
  39.         preIconClass: value < mid ? "myicon-highlight" : "",
  40.         afterIconClass: value >= mid ? "myicon-highlight" : ""
  41.       })
  42.     );
  43.   }
  45.   render() {
  46.     return (
  47.       <div style={{ width: "400px", margin: "50px" }}>
  48.         <h2>numberPicker联动</h2>
  49.         <Row>
  50.           <Col span="12" style={{ marginTop: "10px" }}>
  51.             <Range
  52.               value={this.state.valueInt}
  53.               min={0}
  54.               max={20}
  55.               step={1}
  56.               onChange={this.onChangeInt.bind(this)}
  57.             />
  58.           </Col>
  59.           <Col span="12">
  60.             <NumberPicker
  61.               value={this.state.valueInt}
  62.               min={0}
  63.               max={1024}
  64.               step={1}
  65.               onChange={this.onChangeInt.bind(this)}
  66.             />
  67.           </Col>
  68.         </Row>
  69.         <br />
  70.         <Row>
  71.           <Col span="12" style={{ marginTop: "10px" }}>
  72.             <Range
  73.               value={this.state.valueDec}
  74.               min={0}
  75.               max={1}
  76.               step={0.01}
  77.               onChange={this.onChangeDec.bind(this)}
  78.             />
  79.           </Col>
  80.           <Col span="12">
  81.             <NumberPicker
  82.               value={this.state.valueDec}
  83.               min={0}
  84.               max={1}
  85.               step={0.01}
  86.               onChange={this.onChangeDec.bind(this)}
  87.             />
  88.           </Col>
  89.         </Row>
  90.         <h2>与Icon结合使用</h2>
  92.         <div className="iconWrapper">
  93.           <Icon className={"myicon " + this.state.preIconClass} type="cry" />
  94.           <Range
  95.             min={1}
  96.             max={100}
  97.             onChange={this.onIconRangeProcess.bind(this)}
  98.             value={this.state.valueIcon}
  99.           />
  100.           <Icon
  101.             className={"myicon " + this.state.afterIconClass}
  102.             type="smile"
  103.           />
  104.         </div>
  105.       </div>
  106.     );
  107.   }
  108. }
  110. 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. }

刻度及标识

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

Range 区段选择器 - 图4

查看源码在线预览

  1. import { Range } from "@icedesign/base";
  3. const style = {
  4.   marginBottom: "40px",
  5.   marginTop: "40px"
  6. };
  8. ReactDOM.render(
  9.   <div style={{ width: "400px", margin: "50px" }}>
  10.     <p>设置首尾</p>
  11.     <Range defaultValue={0} marks={[0, 100]} style={style} />
  12.     <Range
  13.       slider={"double"}
  14.       defaultValue={[20, 40]}
  15.       scales={[0, 100]}
  16.       marks={[0, 100]}
  17.       style={style}
  18.     />
  19.     <Range defaultValue={30} style={style} />
  20.     <p>平分</p>
  21.     <Range defaultValue={30} marks={5} style={style} />
  22.     <Range
  23.       slider={"double"}
  24.       defaultValue={[20, 40]}
  25.       scales={10}
  26.       marks={10}
  27.       style={style}
  28.     />
  29.     <Range
  30.       disabled
  31.       slider={"double"}
  32.       defaultValue={[20, 40]}
  33.       scales={10}
  34.       marks={10}
  35.       style={style}
  36.     />
  37.     <p>自由刻度</p>
  38.     <Range defaultValue={30} marks={[0, 26, 37, 100]} style={style} />
  39.     <Range
  40.       slider={"double"}
  41.       defaultValue={[20, 40]}
  42.       marks={[0, 26, 37, 100]}
  43.       style={style}
  44.       hasTip={false}
  45.     />
  46.     <Range
  47.       defaultValue={30}
  48.       marks={{ 0: "0°C", 26: "26°C", 37: "37°C", 100: "100°C" }}
  49.       style={style}
  50.     />
  51.   </div>,
  52.   mountNode
  53. );

min,max,step

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

Range 区段选择器 - 图5

查看源码在线预览

  1. import { Range } from "@icedesign/base";
  3. const style = {
  4.   marginBottom: "40px",
  5.   marginTop: "40px"
  6. };
  7. ReactDOM.render(
  8.   <div style={{ width: "400px", margin: "50px" }}>
  9.     <p>范围 0 ~ 1024</p>
  10.     <Range
  11.       defaultValue={128}
  12.       min={0}
  13.       max={1024}
  14.       marks={[0, 1024]}
  15.       style={style}
  16.     />
  17.     <p>范围 0 ~ 1024，一次移动 128</p>
  18.     <Range
  19.       defaultValue={512}
  20.       min={0}
  21.       max={1024}
  22.       step={128}
  23.       marks={[0, 1024]}
  24.       style={style}
  25.     />
  26.   </div>,
  27.   mountNode
  28. );

选择态反转

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

Range 区段选择器 - 图6

查看源码在线预览

  1. import { Range } from "@icedesign/base";
  3. const style = {
  4.   marginBottom: "15px"
  5. };
  7. ReactDOM.render(
  8.   <div style={{ width: "400px", margin: "50px" }}>
  9.     <Range defaultValue={30} style={style} hasTip={false} />
  10.     <Range defaultValue={30} style={style} reverse hasTip={false} />
  11.     <Range slider={"double"} defaultValue={[20, 40]} style={style} />
  12.     <Range slider={"double"} defaultValue={[20, 40]} style={style} reverse />
  13.     <Range defaultValue={30} disabled style={style} />
  14.     <Range defaultValue={30} disabled style={style} reverse />
  15.     <Range slider={"double"} defaultValue={[20, 40]} disabled style={style} />
  16.     <Range
  17.       slider={"double"}
  18.       defaultValue={[20, 40]}
  19.       disabled
  20.       style={style}
  21.       reverse
  22.     />
  23.   </div>,
  24.   mountNode
  25. );

tipFormmater

tipFormatter 示例

Range 区段选择器 - 图7

查看源码在线预览

  1. import { Range } from "@icedesign/base";
  3. class App extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  6.     this.state = {
  7.       value: 128
  8.     };
  9.   }
  11.   //onChange,移动结束时,如果startValue和endValue不等,会触发这个事件
  12.   onChange(value) {
  13.     console.log("onChange value:", value);
  14.   }
  16.   //mouseDown以及onMove的时候,如果startValue和endValue不等,会触发这个事件.如果是受控组件,改变state要写在这个事件里
  17.   onProcess(value) {
  18.     console.log("onProcess");
  19.     this.setState({ value });
  20.   }
  22.   formatter(value) {
  23.     return "$" + value;
  24.   }
  25.   render() {
  26.     return (
  27.       <div style={{ width: "400px", margin: "50px" }}>
  28.         <p>范围 0 ~ 1024</p>
  29.         <div style={{ width: "400px", marginTop: "50px" }}>
  30.           <Range
  31.             defaultValue={256}
  32.             tipFormatter={this.formatter.bind(this)}
  33.             value={this.state.value}
  34.             onChange={this.onChange.bind(this)}
  35.             onProcess={this.onProcess.bind(this)}
  36.             min={0}
  37.             max={1024}
  38.             marks={[0, 1024]}
  39.           />
  40.         </div>
  41.       </div>
  42.     );
  43.   }
  44. }
  46. ReactDOM.render(<App />, mountNode);

相关区块

Range 区段选择器 - 图8

暂无相关区块