Slider 滑动输入条

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

规则

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

  • 一般水平放置。

Common API

适用平台：Web、React-Native
属性说明类型默认值
minNumber0最小值
maxNumber100最大值
stepNumber or null1步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。
valueNumber设置当前取值。
defaultValueNumber0设置初始取值。
disabledBooleanfalse值为 true 时，滑块为禁用状态
onChangeFunctionNoop当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
maximumTrackTintColor(iOS)String#108ee9（RN)底部背景色。 (web 端可以使用 theme 来定义颜色)
minimumTrackTintColor(iOS)String#ddd (RN)当前选中部分的颜色。(web 端可以使用 theme 来定义颜色)
onAfterChangeFunctionNoop与 ontouchend 触发时机一致，把当前值作为参数传入。
marks (web only)Object{Number:String}{ }刻度标记，key 的类型必须为 Number 且取值在闭区间 min, max 内
dots (web only)Booleanfalse是否只能拖拽到刻度上
included (web only)Booleantruemarks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
maximumTrackStyle(web)Object未选中 track 的样式(将被废弃，请使用 railStyle 代替)
minimumTrackStyle(web)Object选中部分的 track 样式 (将被废弃，请使用 trackStyle 代替)
handleStyle(web)Object滑块的样式
trackStyle(web)Object选中部分滑动条的样式
railStyle(web)Object未选中部分

ToolTip(Web Only)

注：1.0.x 之后将原先的Slider拆分成了Slider, Range, creatToolTip, 以便用户按需加载相应的功能使用, 例如带 tooltip 的 slider 使用方式如下: 
  1. import { Slider, WingBlank, WhiteSpace, createTooltip } from 'antd-mobile';
  3. const SliderWithTooltip = createTooltip(Slider); // High Order Component
  4. <SliderWithTooltip defaultValue={26} min={0} max={30} />

代码演示

基本

Basic slider. When disabled is true, the slider will not be interactable, you can use createTooltip to encapsulateto simulate tooltip. 

  1. /* eslint arrow-body-style: 0 */
  2. import { Slider, WingBlank, WhiteSpace, createTooltip } from 'antd-mobile';
  4. const SliderWithTooltip = createTooltip(Slider);
  6. class App extends React.Component {
  7.   log = (name) => {
  8.     return (value) => {
  9.       console.log(`${name}: ${value}`);
  10.     };
  11.   }
  12.   render() {
  13.     return (
  14.       <div className="am-slider-example">
  15.         <WhiteSpace size="lg" />
  16.         <WingBlank size="lg">
  17.           <p className="title">Slider</p>
  18.           <Slider defaultValue={26} min={0} max={30} onChange={this.log('change')} onAfterChange={this.log('afterChange')} />
  19.         </WingBlank>
  20.         <WhiteSpace size="lg" />
  21.         <WingBlank size="lg">
  22.           <p className="title">Slider with ToolTip</p>
  23.           <SliderWithTooltip defaultValue={26} min={0} max={30} onChange={this.log('change')} onAfterChange={this.log('afterChange')} />
  24.         </WingBlank>
  25.         <WhiteSpace size="lg" />
  26.         <WingBlank size="lg">
  27.           <p className="title">Disabled Slider</p>
  28.           <Slider defaultValue={26} min={0} max={30} disabled onChange={this.log('change')} onAfterChange={this.log('afterChange')} />
  29.         </WingBlank>
  30.         <WhiteSpace size="lg" />
  31.         <WingBlank size="lg">
  32.           <p className="title">Slider With Customized Color</p>
  33.           <Slider
  34.             defaultValue={26}
  35.             min={0}
  36.             max={30}
  37.             trackStyle={{
  38.               backgroundColor: 'red',
  39.               height: '0.1rem',
  40.             }}
  41.             railStyle={{
  42.               backgroundColor: 'blue',
  43.               height: '0.1rem',
  44.             }}
  45.             handleStyle={{
  46.               borderColor: 'blue',
  47.               height: '0.28rem',
  48.               width: '0.28rem',
  49.               marginLeft: '-0.14rem',
  50.               marginTop: '-0.09rem',
  51.               backgroundColor: 'blue',
  52.             }}
  53.           />
  54.         </WingBlank>
  55.       </div>
  56.     );
  57.   }
  58. }
  60. 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-wrapper:last-child {
  11.   margin-bottom: 0.2rem;
  12. }

带 icon 的滑块

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

  1. import { Slider, WhiteSpace, WingBlank, Icon, createTooltip } from 'antd-mobile';
  3. const SliderWithTooltip = createTooltip(Slider);
  5. class IconSlider extends React.Component {
  6.   constructor(props) {
  7.     super(props);
  8.     const max = this.props.max;
  9.     const min = this.props.min;
  10.     const mid = ((max - min) / 2).toFixed(5);
  11.     this.state = {
  12.       preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
  13.       nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
  14.       mid,
  15.       sliderValue: this.props.value,
  16.     };
  17.   }
  18.   handleChange = (v) => {
  19.     this.setState({
  20.       preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
  21.       nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
  22.       sliderValue: v,
  23.     });
  24.   }
  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.             <SliderWithTooltip {...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={['check-circle', 'cross-circle']} />
  44.   , mountNode);
  1. .iconWrapper {
  2.   position: relative;
  3.   padding: 0 0.62rem;
  4. }
  6. .iconWrapper .am-icon {
  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 .am-icon:first-child {
  17.   left: 0;
  18. }
  20. .iconWrapper .am-icon:last-child {
  21.   right: 0;
  22. }
  24. .anticon.anticon-highlight {
  25.   color: #666;
  26. }

自定义滑动反馈

可以利用 HOC 对 Slider 进行封装以自定义 Tooltip
  1. / eslint arrow-body-style: 0 /import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';const createCustomTooltip = (Component) => {  return class ComponentWrapper extends React.Component {    handleWithTooltip = ({ value, dragging, index, className, vertical, offset, …restProps }) => {      const style = vertical ? { bottom: ${offset}% } : { left: ${offset}% };      const tipStyle = { textAlign: 'center' };      return (        <div key={index}>          <div {…restProps} className={className} style={style} />          <div style={tipStyle}>{dragging && 拖动到了${value} }</div>        </div>      );    }    render() {      return <Component {…this.props} handle={this.handleWithTooltip} />;    }  };};const SliderWithCustomTooltip = createCustomTooltip(Slider);class App extends React.Component {  log = (name) => {    return (value) => {      console.log(${name}: ${value});    };  }  render() {    return (      <div className="am-slider-example">        <WhiteSpace size="lg" />        <WingBlank size="lg">          <p className="title">Slider 自定义 ToolTip</p>          <SliderWithCustomTooltip defaultValue={26} min={0} max={30} onChange={this.log('change')} onAfterChange={this.log('afterChange')} />        </WingBlank>        <WhiteSpace size="lg" />      </div>    );  }}ReactDOM.render(<App />, mountNode);
  1. .demo-preview-item .am-slider-wrapper {  margin-bottom: 0.3rem;}.demo-preview-item .am-slider-example {  overflow: hidden;}.am-wingblank.am-wingblank-lg {  margin-bottom: 0.6rem;}.demo-preview-item .am-slider-wrapper:last-child {  margin-bottom: 0.2rem;}
Slider滑动输入条 - 图1