Slider 滑动输入条

定义／Definition

滑块允许用户在一个限定范围内调整某个数值或进程。

规则 / Rule

  • 由一条水平的轨迹和一个Thumb(滑块中支持用户水平拖拽的圆形控件)组成；

  • 左边和右边支持使用自定义图片来表述相对的最小值与最大值的含义；

  • 填充轨道左边缘最小值之间到Thumb之间的部分；

  • 定义Thumb的外观，让用户一看就知道滑块当前的状态。

代码演示

基本

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

  1. import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';
  3. let App = React.createClass({
  4.   render() {
  5.     return (
  6.       <div className="am-slider-example">
  7.         <WhiteSpace size={32} />
  8.         <WingBlank size={20}>
  9.           <p className="title">单模块</p>
  10.           <Slider defaultValue={26} />
  11.         </WingBlank>
  12.         <WhiteSpace size={32} />
  13.         <WingBlank size={20}>
  14.           <p className="title">双模块</p>
  15.           <WhiteSpace />
  16.           <Slider range defaultValue={[20, 50]} />
  17.         </WingBlank>
  18.         <WhiteSpace size={32} />
  19.         <WingBlank size={20}>
  20.           <p className="title">不可用状态</p>
  21.           <Slider range defaultValue={[20, 50]} disabled />
  22.         </WingBlank>
  23.         <WhiteSpace size={32} />
  24.       </div>
  25.     );
  26.   },
  27. });
  28. ReactDOM.render(<App />, mountNode);

事件

当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 touchend 时，会触发 onAfterChange 事件，并把当前值作为参数传入。 

  1. import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';
  3. function log(value) {
  4.   console.log(value);
  5. }
  7. let App = React.createClass({
  8.   render() {
  9.     return (
  10.       <div>
  11.         <WhiteSpace size={32} />
  12.         <WingBlank size={20}>
  13.           <Slider defaultValue={30} onChange={log} />
  14.         </WingBlank>
  15.         <WhiteSpace size={32} />
  16.         <WingBlank size={20}>
  17.           <Slider range step={10} defaultValue={[20, 50]} onChange={log} />
  18.         </WingBlank>
  19.         <WhiteSpace size={32} />
  20.         <WingBlank size={20}>
  21.           <Slider defaultValue={30} onAfterChange={log} />
  22.         </WingBlank>
  23.         <WhiteSpace size={32} />
  24.       </div>
  25.     );
  26.   },
  27. });
  29. ReactDOM.render(<App />, mountNode);

分段式滑块

使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。 

  1. import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';
  3. const marks = {
  4.   0: '0°C',
  5.   26: '26°C',
  6.   37: '37°C',
  7.   100: {
  8.     style: {
  9.       color: 'red',
  10.     },
  11.     label: <strong>100°C</strong>,
  12.   },
  13. };
  15. let App = React.createClass({
  16.   render() {
  17.     return (
  18.       <div className="am-slider-example">
  19.         <WhiteSpace size={32} />
  20.         <WingBlank size={20}>
  21.           <p className="title">包含关系</p>
  22.           <Slider marks={marks} defaultValue={37} />
  23.         </WingBlank>
  24.         <WhiteSpace size={32} />
  25.         <WingBlank size={20}>
  26.           <Slider range marks={marks} defaultValue={[26, 37]} />
  27.         </WingBlank>
  28.         <WhiteSpace size={32} />
  29.         <WingBlank size={20}>
  30.           <p className="title">并列关系</p>
  31.           <Slider marks={marks} included={false} defaultValue={37} />
  32.         </WingBlank>
  33.         <WhiteSpace size={32} />
  34.         <WingBlank size={20}>
  35.           <p className="title">结合 step</p>
  36.           <Slider marks={marks} step={10} defaultValue={37} />
  37.         </WingBlank>
  38.         <WhiteSpace size={32} />
  39.         <WingBlank size={20}>
  40.           <p>`step=null`</p>
  41.           <Slider marks={marks} step={null} defaultValue={37} />
  42.         </WingBlank>
  43.         <WhiteSpace size={32} />
  44.       </div>
  45.     );
  46.   },
  47. });
  49. ReactDOM.render(<App />, mountNode);

带 icon 的滑块

滑块左右可以设置图标来表达业务含义。 

  1. import { Slider, WhiteSpace, WingBlank } from 'antd-mobile';
  2. import Icon from '../../icon';
  4. const IconSlider = React.createClass({
  5.   getInitialState() {
  6.     const max = this.props.max;
  7.     const min = this.props.min;
  8.     const mid = ((max - min) / 2).toFixed(5);
  9.     return {
  10.       preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
  11.       nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
  12.       mid,
  13.       sliderValue: this.props.value,
  14.     };
  15.   },
  17.   handleChange(v) {
  18.     this.setState({
  19.       preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
  20.       nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
  21.       sliderValue: v,
  22.     });
  23.   },
  25.   render() {
  26.     return (
  27.       <div>
  28.         <WhiteSpace size={20} />
  29.         <WingBlank size={20}>
  30.           <div className="iconWrapper">
  31.             <Icon className={this.state.preIconClass} type={this.props.icon[0]} />
  32.             <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
  33.             <Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
  34.           </div>
  35.         </WingBlank>
  36.         <WhiteSpace size={32} />
  37.       </div>
  38.     );
  39.   },
  40. });
  42. ReactDOM.render(
  43.   <IconSlider min={0} max={20} value={0} icon={['frown', 'smile']} />
  44. , mountNode);
  1. .iconWrapper {
  2.   position: relative;
  3.   padding: 0px 48px;
  4. }
  6. .iconWrapper .anticon {
  7.   position: absolute;
  8.   top: -11px;
  9.   width: 24px;
  10.   height: 24px;
  11.   line-height: 1;
  12.   font-size: 24px;
  13.   color: #ccc;
  14. }
  16. .iconWrapper .anticon:first-child {
  17.   left: 0;
  18. }
  20. .iconWrapper .anticon:last-child {
  21.   right: 0;
  22. }
  24. .anticon.anticon-highlight {
  25.   color: #666;
  26. }

自定义提示

使用 tipFormatter 可以格式化 Tooltip 的内容，设置 tipFormatter={null}，则隐藏 Tooltip。 

  1. import { Slider, WhiteSpace, WingBlank } from 'antd-mobile';
  3. function formatter(value) {
  4.   return `${value}%`;
  5. }
  7. let App = React.createClass({
  8.   render() {
  9.     return (
  10.       <div className="am-slider-example">
  11.         <WhiteSpace size={32} />
  12.         <WingBlank size={20}>
  13.           <p className="title">格式化Tooltip</p>
  14.           <Slider tipFormatter={formatter} />
  15.         </WingBlank>
  16.         <WhiteSpace size={32} />
  17.         <WingBlank size={20}>
  18.           <p className="title">隐藏Tooltip</p>
  19.           <Slider tipFormatter={null} />
  20.         </WingBlank>
  21.         <WhiteSpace size={32} />
  22.       </div>
  23.     );
  24.   },
  25. });
  27. ReactDOM.render(<App />, mountNode);

Slider滑动输入条 - 图1

API

参数类型默认值说明
range webBooleanfalse双滑块模式
minNumber0最小值
maxNumber100最大值
marks webObject{Number:String}{ }刻度标记，key 的类型必须为 Number 且取值在闭区间 [min, max] 内
stepNumber or null1步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。
dots webBooleanfalse是否只能拖拽到刻度上
valueNumber or [number, number]设置当前取值。当 range 为 false 时，使用 Number，否则用 [Number, Number]
defaultValueNumber or [number, number]0 or [0, 0]设置初始取值。当 range 为 false 时，使用 Number，否则用 [Number, Number]
included webBooleantruemarks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
disabledBooleanfalse值为 true 时，滑块为禁用状态
onChangeFunctionNoop当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
onAfterChangeFunctionNoop与 ontouchend 触发时机一致，把当前值作为参数传入。
tipFormatter webFunction or nullIDENTITYSlider 会把当前值传给 tipFormatter，并在 Tooltip 中显示 tipFormatter 的返回值，若为 null，则隐藏 Tooltip。