Slider 滑动输入条

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

规则

默认状态下，左边为最小值，右边为最大值。
一般水平放置。

代码演示

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

import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';
const App = React.createClass({
  render() {
    return (
      <div className="am-slider-example">
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <p className="title">单模块</p>
          <Slider defaultValue={26} min={0} max={100} />
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <p className="title">不可用状态</p>
          <Slider defaultValue={26} disabled />
        </WingBlank>
        <WhiteSpace size="lg" />
      </div>
    );
  },
});
ReactDOM.render(<App />, mountNode);

事件

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

import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';
function log(value) {
  console.log(value);
}
const App = React.createClass({
  render() {
    return (
      <div>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Slider defaultValue={30} onChange={log} />
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <Slider defaultValue={30} onAfterChange={log} />
        </WingBlank>
        <WhiteSpace size="lg" />
      </div>
    );
  },
});
ReactDOM.render(<App />, mountNode);

带 icon 的滑块

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

import { Slider, WhiteSpace, WingBlank } from 'antd-mobile';
import Icon from '../../icon';
const IconSlider = React.createClass({
  getInitialState() {
    const max = this.props.max;
    const min = this.props.min;
    const mid = ((max - min) / 2).toFixed(5);
    return {
      preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
      nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
      mid,
      sliderValue: this.props.value,
    };
  },
  handleChange(v) {
    this.setState({
      preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
      nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
      sliderValue: v,
    });
  },
  render() {
    return (
      <div>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <div className="iconWrapper">
            <Icon className={this.state.preIconClass} type={this.props.icon[0]} />
            <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
            <Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
          </div>
        </WingBlank>
        <WhiteSpace size="lg" />
      </div>
    );
  },
});
ReactDOM.render(
  <IconSlider min={0} max={20} value={0} icon={['frown', 'smile']} />
, mountNode);

.iconWrapper {
  position: relative;
  padding: 0px 0.62rem;
}
.iconWrapper .anticon {
  position: absolute;
  top: -0.18rem;
  width: 0.44rem;
  height: 0.44rem;
  line-height: 1;
  font-size: 0.44rem;
  color: #000;
}
.iconWrapper .anticon:first-child {
  left: 0;
}
.iconWrapper .anticon:last-child {
  right: 0;
}
.anticon.anticon-highlight {
  color: #666;
}

自定义提示

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

import { Slider, WhiteSpace, WingBlank } from 'antd-mobile';
function formatter(value) {
  return `${value}%`;
}
const App = React.createClass({
  render() {
    return (
      <div className="am-slider-example">
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <p className="title">格式化Tooltip</p>
          <Slider tipFormatter={formatter} />
        </WingBlank>
        <WhiteSpace size="lg" />
        <WingBlank size="lg">
          <p className="title">隐藏Tooltip</p>
          <Slider tipFormatter={null} />
        </WingBlank>
        <WhiteSpace size="lg" />
      </div>
    );
  },
});
ReactDOM.render(<App />, mountNode);

API

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

Slider滑动输入条

Slider 滑动输入条

规则

代码演示

API