# Slider

滑动输入条组件

- 滑动进度条确定当前进度的百分比。
- 可通过设置process确定初始进度百分比, 范围从0-100。
- 可通过placement设置当前进度提示框的位置, 可选top/bottoom。
- 可通过tipStay设置初始和松开按钮时提示是否消失，默认false不显示。
- 可通过range制定范围，默认0-100，必需是长度为2的数组，第一个数字表示初始，第二个数字表示终点。
- 可通过showRange判断是否在进度条前后显示范围，默认不显示。
- 可通过duration设置固定移动的距离，默认1。
- 可通过onSliderChange设置拖拽进度条松开时的回调函数。
- 可通过disabled设置进度条只读。
- 使用Slider前确保父级是有宽度的元素；使用flex需要加一层宽度100%的外壳。

主要属性和接口：

- process:初始进度百分比, 默认0
  如: `<Slider progress={10}/>`
- placement:进度提示框的位置, 默认top
  如: `<Slider placement="bottom" />`
- tipStay:初始和松开按钮时提示是否消失，默认false
  如: `<Slider tipStay />`
- range:范围，默认[0,100]。
  如: `<Slider range={[20,50]} />`
- showRange:是否在进度条前后显示范围，默认不显示。
  如: `<Slider showRange />`
- duration:固定移动的距离，默认1。
  如: `<Slider duration={20} />`
- onSliderChange:拖拽进度条松开时的回调函数
  如: `<Slider onSliderChange={(progress)=>{console.log(progress);} />`
- disabled:进度条只读, 不可操作
  如: `<Slider disabled/>`

### 方法

- onSliderChange

### 属性

- classPrefix
- componentTag
- duration
- placement
- progress
- range
- showRange
- tipStay

### 事件

Extends Component
Defined in: `src/Slider.js:8`
Module: 操作类组件

Available since 1.0.0

## Constructor

### Slider

`Slider ()`

Defined in `src/Slider.js:8`

Available since 1.0.0

#### Example:

    import React, { Component } from "react";
    import {Slider} from "phoenix-ui";
    import Code from "./code/code";

    export default class slider extends Component{

        constructor(props,context){
            super(props,context);

            this.state = {
                progress: 50,
                progress1: 20
            }
        }

        onSliderChange(key, newProgress){ // progress百分比
            let o = {};
            o[key] = newProgress;
            this.setState(o);
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">Slider</h2>
                    <h3 className="comp-type">progress(默认0) 初始进度百分比</h3>
                    <div className="content">
                        <Slider progress={25} />
                    </div>
                    <Code target="slider-progress" />

                    <h3 className="comp-type">placement(默认top) 进度条提示框的位置</h3>
                    <div className="content">
                        <Slider />
                        <Slider placement="bottom" />
                    </div>
                    <Code target="slider-placement" />

                    <h3 className="comp-type">tipStay(默认false) 松开进度条时是否要隐藏提示</h3>
                    <div className="content">
                        <Slider tipStay />
                    </div>
                    <Code target="slider-tipstay" />

                    <h3 className="comp-type">range(默认[0,100]) 范围</h3>
                    <div className="content">
                        <Slider range={[50,200]} showRange />
                    </div>
                    <Code target="slider-range" />

                    <h3 className="comp-type">showRange(默认false) 范围</h3>
                    <div className="content">
                        <Slider range={[25,65]} showRange />
                    </div>
                    <Code target="slider-showrange" />

                    <h3 className="comp-type">duration(默认1) 每次滑动的距离</h3>
                    <div className="content">
                        <Slider duration={20} />
                    </div>
                    <Code target="slider-duration" />

                    <h3 className="comp-type">onSliderChange 拖拽进度条松开时的回调函数</h3>
                    <div className="content">
                        <Slider progress={this.state.progress} onSliderChange={(newProgress)=>{this.onSliderChange('progress',newProgress);}} />
                        <div style={{textAlign:"center",padding:"1rem 0"}}>Progress: {this.state.progress}</div>
                    </div>
                    <Code target="slider-onsliderchange" />

                    <h3 className="comp-type">disabled 进度条只读</h3>
                    <div className="content">
                        <Slider disabled progress={10} />
                    </div>
                    <Code target="slider-disabled" />

                    <h3 className="comp-type">整合</h3>
                    <div className="content">
                        <Slider progress={this.state.progress1} onSliderChange={(newProgress)=>{this.onSliderChange('progress1',newProgress);}}
                            range={[10,50]} duration={5} showRange tipStay />
                    </div>
                    <Code target="slider-disabled" />
                </div>
            );
        }
    }

## 方法

### onSliderChange

`onSliderChange ()`

Defined in `src/Slider.js:105`

改变进程时的回调函数

## 属性

### `classPrefix`

String

Defined in `src/Slider.js:51`

样式前缀

Default:

`'slider'`

### `componentTag`

String

Defined in `src/Slider.js:58`

标签tagName

### `duration`

Number

Defined in `src/Slider.js:91`

每次移动的固定距离，默认1

Default:

`1`

### `placement`

String

Defined in `src/Slider.js:70`

进程提示的位置,默认top

Default:

`'top'`

### `progress`

String

Defined in `src/Slider.js:64`

初始进程,默认0

### `range`

Array

Defined in `src/Slider.js:77`

范围，默认0-100，可传固定范围的数组如：[25,50]

Default:

`[0,100]`

### `showRange`

Boolean

Defined in `src/Slider.js:84`

是否在进度条前后显示范围

Default:

`false`

### `tipStay`

Boolean

Defined in `src/Slider.js:98`

初始及松开按钮时是否显示进度

Default:

`false`