Slider 滑动输入条

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

规则

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

  • 一般水平放置。

代码演示

基本

Basic slider. When disabled is true, the slider will not be interactable 

  1. /* eslint arrow-body-style: 0 */
  2. import { Slider, WingBlank, WhiteSpace } from 'antd-mobile';
  4. class App extends React.Component {
  5.   log = (name) => {
  6.     return (value) => {
  7.       console.log(`${name}: ${value}`);
  8.     };
  9.   }
  10.   render() {
  11.     return (
  12.       <div className="am-slider-example">
  13.         <WhiteSpace size="lg" />
  14.         <WingBlank size="lg">
  15.           <p className="sub-title">Slider</p>
  16.           <Slider
  17.             style={{ marginLeft: 30, marginRight: 30 }}
  18.             defaultValue={26}
  19.             min={0}
  20.             max={30}
  21.             onChange={this.log('change')}
  22.             onAfterChange={this.log('afterChange')}
  23.           />
  24.         </WingBlank>
  25.         <WhiteSpace size="lg" />
  26.         <WingBlank size="lg">
  27.           <p className="sub-title">Disabled slider</p>
  28.           <Slider
  29.             style={{ marginLeft: 30, marginRight: 30 }}
  30.             defaultValue={26}
  31.             min={0}
  32.             max={30}
  33.             disabled
  34.             onChange={this.log('change')}
  35.             onAfterChange={this.log('afterChange')}
  36.           />
  37.         </WingBlank>
  38.         <WhiteSpace size="lg" />
  39.         <WingBlank size="lg">
  40.           <p className="sub-title">Slider with customized color</p>
  41.           <Slider
  42.             style={{ marginLeft: 30, marginRight: 30 }}
  43.             defaultValue={26}
  44.             min={0}
  45.             max={30}
  46.             trackStyle={{
  47.               backgroundColor: 'red',
  48.               height: '5px',
  49.             }}
  50.             railStyle={{
  51.               backgroundColor: 'blue',
  52.               height: '5px',
  53.             }}
  54.             handleStyle={{
  55.               borderColor: 'blue',
  56.               height: '14px',
  57.               width: '14px',
  58.               marginLeft: '-7px',
  59.               marginTop: '-4.5px',
  60.               backgroundColor: 'blue',
  61.             }}
  62.           />
  63.         </WingBlank>
  64.       </div>
  65.     );
  66.   }
  67. }
  69. ReactDOM.render(<App />, mountNode);
  1. .demo-preview-item .am-slider-wrapper {
  2.   margin-bottom: 15px;
  3. }
  4. .demo-preview-item .am-slider-example {
  5.   overflow: hidden;
  6. }
  7. .am-wingblank.am-wingblank-lg {
  8.   margin-bottom: 30px;
  9. }
  10. .demo-preview-item .am-slider-wrapper:last-child {
  11.   margin-bottom: 10px;
  12. }
  13. .sub-title {
  14.   color: #888;
  15.   font-size: 14px;
  16.   padding: 30px 0 18px 0;
  17.   margin: 0;
  18. }

Slider滑动输入条 - 图1

API

属性说明类型默认值
minNumber0最小值
maxNumber100最大值
stepNumber or null1步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。
valueNumber设置当前取值。
defaultValueNumber0设置初始取值。
disabledBooleanfalse值为 true 时，滑块为禁用状态
onChangeFunctionNoop当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
onAfterChangeFunctionNoop与 ontouchend 触发时机一致，把当前值作为参数传入。
marksObject{Number:String}{ }刻度标记，key 的类型必须为 Number 且取值在闭区间 min, max 内
dotsBooleanfalse是否只能拖拽到刻度上
includedBooleantruemarks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
maximumTrackStyleObject未选中 track 的样式(将被废弃，请使用 railStyle 代替)
minimumTrackStyleObject选中部分的 track 样式 (将被废弃，请使用 trackStyle 代替)
handleStyleObject滑块的样式
trackStyleObject选中部分滑动条的样式
railStyleObject未选中部分