Slider 滑动输入条

允许用户在一个区间中选择特定值，eg：控制屏幕的显示亮度。

规则

  • 默认状态下，左边为最小值，右边为最大值。

  • 一般水平放置。

代码演示

基本

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

  1. import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';
  3. const App = React.createClass({
  4.   render() {
  5.     return (
  6.       <div className="am-slider-example">
  7.         <WhiteSpace size="lg" />
  8.         <WingBlank size="lg">
  9.           <p className="title">单模块</p>
  10.           <Slider defaultValue={26} min={0} max={100} />
  11.         </WingBlank>
  12.         <WhiteSpace size="lg" />
  13.         <WingBlank size="lg">
  14.           <p className="title">不可用状态</p>
  15.           <Slider defaultValue={26} disabled />
  16.         </WingBlank>
  17.         <WhiteSpace size="lg" />
  18.       </div>
  19.     );
  20.   },
  21. });
  22. ReactDOM.render(<App />, mountNode);
  1. .demo-preview-item .am-slider-wrapper {
  2.   margin-bottom: 0.3rem;
  3. }
  4. .demo-preview-item .am-slider-example {
  5.   overflow: hidden;
  6. }
  7. .am-wingblank.am-wingblank-lg {
  8.   margin-bottom: 0.6rem;
  9. }
  10. .demo-preview-item .am-slider-example .title {
  11.   margin-bottom: 0.32rem;
  12. }
  13. .demo-preview-item .am-slider-wrapper:last-child {
  14.   margin-bottom: 0.2rem;
  15. }

事件

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

  1. import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';
  3. function log(value) {
  4.   console.log(value);
  5. }
  7. const App = React.createClass({
  8.   render() {
  9.     return (
  10.       <div>
  11.         <WhiteSpace size="lg" />
  12.         <WingBlank size="lg">
  13.           <Slider defaultValue={30} onChange={log} />
  14.         </WingBlank>
  15.         <WhiteSpace size="lg" />
  16.         <WingBlank size="lg">
  17.           <Slider defaultValue={30} onAfterChange={log} />
  18.         </WingBlank>
  19.         <WhiteSpace size="lg" />
  20.       </div>
  21.     );
  22.   },
  23. });
  25. 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="lg" />
  29.         <WingBlank size="lg">
  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="lg" />
  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: 0 0.62rem;
  4. }
  6. .iconWrapper .anticon {
  7.   position: absolute;
  8.   top: -0.18rem;
  9.   width: 0.44rem;
  10.   height: 0.44rem;
  11.   line-height: 1;
  12.   font-size: 0.44rem;
  13.   color: #000;
  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. const App = React.createClass({
  8.   render() {
  9.     return (
  10.       <div className="am-slider-example">
  11.         <WhiteSpace size="lg" />
  12.         <WingBlank size="lg">
  13.           <p className="title">格式化Tooltip</p>
  14.           <Slider tipFormatter={formatter} />
  15.         </WingBlank>
  16.         <WhiteSpace size="lg" />
  17.         <WingBlank size="lg">
  18.           <p className="title">隐藏Tooltip</p>
  19.           <Slider tipFormatter={null} />
  20.         </WingBlank>
  21.         <WhiteSpace size="lg" />
  22.       </div>
  23.     );
  24.   },
  25. });
  27. ReactDOM.render(<App />, mountNode);

Slider滑动输入条 - 图1

API ( 适用平台：WEB、React-Native )

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