# MSlider 滑块

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/slider/freepass)
- 平台：移动端
- 维护者：赵俊飞
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MSlider]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { Component } from 'react';
import { MSlider, constants,MDialog } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-slider`;

type SelectDemoState = {
  value: number;
  visible: boolean;
}
const { toast } = MDialog;

class SliderDemo extends Component<any, SelectDemoState> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: 50,
      visible: false,
    };
  }

  toastValue = (value:number)=>{
    toast({
      content: `当前选中的值是${value}`,
    });
  }

  render() {
    function log(value: any) {
      console.log(value); //eslint-disable-line
    }

    const style = { width: 350, padding: "12px",background:'#fff',marginBottom:10 };
    return (
      <div className={prefixCls} style={{ padding: 10 }}>
        <h2>Slider 滑动条</h2>
        <div style={style}>
          <h3>基本使用</h3>
          <MSlider   onChange={log} />
        </div>
        <div style={style}>
          <h3>在拖动时显示悬浮提示</h3>
          <MSlider showToolips onChange={log} />
        </div>
        <div style={style}>
          <h3>最大值/最小值</h3>
          <MSlider step={100} min={100} max={1000} dots onAfterChange={this.toastValue} />
        </div>
        <div style={style}>
          <h3>定义起始位置 `startPoint=20`</h3>
          <MSlider onChange={log} startPoint={20} />
        </div>
        <div style={style}>
          <h3>反转使用</h3>
          <MSlider defaultValue={40} onChange={log} reverse />
        </div>
        <div style={style}>
          <h3>指定步长20</h3>
          <MSlider step={20} defaultValue={50} />
        </div>
        <div style={style}>
          <h3>显示刻度并指定步长</h3>
          <MSlider  dots step={10} defaultValue={30} />
        </div>
      </div>
    );
  }
}

export default SliderDemo;
```

### Range 滑动条（范围）

```jsx
import React, { Component } from 'react';
import { MSlider, constants, MDialog } from '@weapp/ui';
const { MRange } = MSlider;

const prefixCls = `${constants.uiPcClsPrefix}-demo-slider`;

type SelectDemoState = {
  value: number;
  visible: boolean;
}
const { toast } = MDialog;

class SliderDemo extends Component<any, SelectDemoState> {
  constructor(props: any) {
    super(props);
    this.state = {
      value: 50,
      visible: false,
    };
  }
  toastValue = (value: number[]) => {
    toast({
      content: `当前选中的值是[${value}]`,
    });
  }

  render() {
    function log(value: any) {
      console.log(value); //eslint-disable-line
    }
    const style = { width: 350, padding: "12px", marginBottom: 10, background: '#fff' };
    return (
      <div className={prefixCls} style={{ padding: 10 }}>
        <div style={style}>
          <h3>基本使用,禁止交叉`allowCross=false`</h3>
          <MRange allowCross={false} defaultValue={[0, 20]} onChange={log} />
        </div>
        <div style={style}>
          <h3>反转使用</h3>
          <MRange allowCross={false} defaultValue={[0, 20]} onChange={log} reverse onAfterChange={this.toastValue} />
        </div>
        <div style={style}>
          <h3>步长, `step=20`</h3>
          <MRange step={20} defaultValue={[10, 20]} onAfterChange={this.toastValue} />
        </div>
        <div style={style}>
          <h3>步长，标记`step=20, dots`</h3>
          <MRange marks={{
            0: 0,
            20: 20,
            40: 40,
            60: 60,
            80: 80,
            100: 100,
          }} trackStyle={[{ background: 'red', color: 'green' }, { background: 'green' }]} handleStyle={[{ background: 'black' }, { background: 'yellow' }]} tabIndex={1} dots step={10} defaultValue={[20, 40]} onAfterChange={this.toastValue} />
        </div>
        <div style={style}>
          <h3>禁用</h3>
          <MRange allowCross={false} defaultValue={[0, 20]} onChange={log} disabled />
        </div>
      </div>
    );
  }
}

export default SliderDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| value | 当前数(受控值) | number | 否 |  |
| defaultValue | 当前数(默认值) | number | 否 |  |
| min | 最小值 | number | 否 | 0 |
| max | 最大值 | number | 否 | 100 |
| step | 步长 | number\null | 否 |  |
| prefixCls | class 前缀 | string | 否 |  |
| onChange | 拖动时回调 | (value: number) => void | 否 |  |
| onBeforeChange | 拖动前回调 | (value: number) => {} | 否 |  |
| onAfterChange | 拖动后回调 | (value: number) => void | 否 |  |
| vertical | 是否垂直显示 | boolean | 否 | false |
| included | 是否包含端点 | boolean | 否 | true |
| disabled | 禁用 | boolean | 否 | false |
| readOnly | 只读 | boolean | 否 | false |
| reverse | 反转 | boolean | 否 | false |
| startPoint | 起始位置 | number | 否 | 0 |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 min, max 内，每个标签可以单独设置样式 | object | 否 | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } |
| minimumTrackStyle |  | CSSProperties | 否 |  |
| trackStyle | 滑块滑过区域样式控制 | CSSProperties | 否 |  |
| handleStyle | 滑块样式 | CSSProperties | 否 |  |
#### 仅供 range 和 slider 使用的参数

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| showPercent | 显示百分比 | boolean | 否 | false |
| showToolips | 是否显示滑块顶部的 toolips | boolean | 否 | false |
#### 仅供 range 参数

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| draggableTrack | 范围刻度是否可被拖拽 | boolean | 否 | false |
