# Slider

滑块

滑动型输入器，展示当前值和可选范围

## 使用场景

在数值区间 or 自定义区间内进行选择时，使用。

## 案例演示

### Slider 基本使用

---demo
```js
import { Slider } from 'amos-framework';

ReactDOM.render(<Slider defaultValue={30} onChange={v => console.log(v)} />, _react_runner_);
```
---demoend

### Slider step 为小数

---demo
```js
import { Slider } from 'amos-framework';

ReactDOM.render(<Slider defaultValue={30} step={0.1} onChange={v => console.log(v)} />, _react_runner_);
```
---demoend


### Slider 隐藏提示

---demo
```js
import { Slider } from 'amos-framework';

ReactDOM.render(<Slider defaultValue={30} hidePop onChange={v => console.log(v)} />, _react_runner_);
```
---demoend

### Slider 禁用

---demo
```js
import { Slider } from 'amos-framework';

ReactDOM.render(<Slider defaultValue={30} disabled />, _react_runner_);
```
---demoend

### Slider 自定义提示框内容

---demo
```js
import { Slider } from 'amos-framework';

ReactDOM.render((
  <Slider
    min={128}
    max={1024}
    defaultValue={256}
    onChange={v => console.log(v)}
    step={64}
    formatter={v => `分配内存：${v} MB`}
  />
), _react_runner_);
```
---demoend

### 自定义联合使用

---demo
```js
import { Slider, InputNumber } from 'amos-framework';

class Demo extends Component {

  state = {
    inputValue: 0
  };

  onChange = (v) => {
    this.setState({
      inputValue: v
    });
  }

  render() {
    const { inputValue } = this.state;
    return (
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Slider min={0} max={20} onChange={this.onChange} value={inputValue} style={{ flex: 1 }} />
        <InputNumber
          min={0}
          max={20}
          style={{ width: 80, marginLeft: 16 }}
          iptStyle={{ marginLeft: 0 }}
          value={inputValue}
          onChange={this.onChange}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 直接使用 CombineSlider

---demo
```js
import { Slider } from 'amos-framework';

const CombineSlider = Slider.CombineSlider;

class Demo extends Component {

  state = {
    inputValue: 0
  };

  onChange = (v) => {
    this.setState({
      inputValue: v
    });
  }

  render() {
    const { inputValue } = this.state;
    return (
      <div style={{ width: '20em' }}>
        <CombineSlider
          min={0}
          max={20}
          onChange={this.onChange}
          value={inputValue}
        />
        <CombineSlider
          min={0}
          max={20}
          onChange={this.onChange}
          value={inputValue}
          disabled
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 直接使用 HandleSlider

---demo
```js
import { Slider } from 'amos-framework';

const HandleSlider = Slider.HandleSlider;

class Demo extends Component {

  state = {
    inputValue: 0
  };

  onChange = (v) => {
    this.setState({
      inputValue: v
    });
  }

  render() {
    const { inputValue } = this.state;
    return (
      <div style={{ width: '20em' }}>
        <HandleSlider
          min={0}
          max={20}
          onChange={this.onChange}
          value={inputValue}
          sliderProps={{
            barMode: 'rect'
          }}
          renderPrev={(value) => <span>{value}</span>}
        />
        <HandleSlider
          min={0}
          max={20}
          onChange={this.onChange}
          value={inputValue}
          disabled
          renderExtra={(value) => <span>{value}</span>}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

## props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | `amos-slider` | 组件默认clssname prefix |
| className | string | - | 组件自定义clssname |
| min | Number | 0 | 最小值，默认0 |
| max | Number | 100 | 最大值，默认100 |
| step | Number | 1 | 步长，默认1 |
| value | Number | - | 值 |
| defaultValue | Number | - | 同 value，不可控 |
| formatter | func | - | 提示框内容格式器，默认 `formatter: value => value` |
| onDragging | func | - | 拖动过程事件，参数为当前拖动条的值 |
| onChange | func | - | 拖动完成或点击后的回调，参数为当前拖动条的值 |
| disabled | boolean | - | 是否禁用 |
| hidePop | boolean | - | 是否隐藏当前值提示 popover， 如果设置 `hidePop=false`，则隐藏 popover，此时会添加内置 title，用于提示当前值。如果隐藏 pop 时，也不需要展示内置 title，此时可通过设置 `formatter={v => undefined}` 禁用 |

### CombineSlider props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | `amos-slider` | 组件默认clssname prefix |
| className | string | - | 组件自定义clssname |
| style | object | - | 组件外层容器 style |
| onChange | func | - | Slider 或者 InputNumber 变化时的回调 |
| sliderProps | Object | - | InputNumber 输入框额外的props |
| inputProps | Object | - | Slider 额外的props |
| min | Number | 0 | 最小值，默认0 |
| max | Number | 100 | 最大值，默认100 |
| step | Number | 1 | 步长，默认1 |
| value | Number | - | 值 |
| disabled | boolean | - | 是否禁用，全部禁用。Slider 或者 InputNumber各自是否禁用，可在 sliderProps 和 inputProps 中分别进行控制 |