pixui-react-slider

PixUI Slider

使用说明

该组件目前支持最多0至100之间的整数调整；有连续和离散两种配置，连续配置下默认0至100，离散配置下可任意指定100以内的整数。

可以选配是否具有增减按钮；

使用该组件时需要进行设置的一些参数：

const SliderData: SliderProps ={
    percent: 0,                     //连续模式下slider初始位置
    wrapperHeight: 34,              //进度条组件高度
    wrapperWidth: 376,              //进度条组件宽度
    height: 5,                      //进度条粗细
    dotWidth: 26,                   //进度条拖拽点宽度
    dotHeight: 27,                  //进度条拖拽点高度
    dotWrapperWidth: 56,            
    dotWrapperHeight: 57,

    outerBg: Images.outer,          //进度条-未完成部分背景图
    innerBg: Images.inner,          //进度条-已完成部分背景图
    dotBg: Images.dot,              //拖拽点背景图
    onDragStart: null,              //onDragStart事件回调函数
    onDrag: null,                   //onDrag事件回调函数
    onDragEnd: null,                //onDragEnd事件回调函数

    isDiscrete: true,               //是否为离散
    //当不为离散时以下不必配置
    discrete:0,                     //离散初始值
    maxDiscrete: 60,                //配置离散个数

    hasIncDecButton: true,          //是否具有增减按钮
    //以下可选，当没有增减按钮时不必配置
    incButtonWidth: 30,             //增加按钮 宽度
    incButtonHeight: 30,            //增加按钮 高度
    decButtonWidth: 30,             //减少按钮 宽度
    decButtonHeight: 30,            //减少按钮 高度
    incButtonBg: Images.dot,        //增加按钮 背景图
    decButtonBg: Images.dot,        //减少按钮 背景图
    onIncClick: null,               //增加按钮 回调函数
    onDecClick: null,               //减少按钮 回调函数
    overallWidth:500                //带增减按钮的slider组件的总宽度，用于配置增减按钮和进度条间隔距离
}

//函数使用Demo
    onDrag = (value: number)=>{ //value返回当前进度值
        ...
    }

    onDecClick = (value:number)=>{
        ...
    }

//组件使用:
    render(){
        return (
            <div style={ xxx }>
                <Slider {...SliderData}/>
            </div>
        )
    }