bee-slider

react bee-slider component for tinper-bee

some description... #Slider 滑动型输入器，展示当前值和可选范围。 当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

使用方法

import Slider from 'bee-slider';

React.render(<Slider defaultValue={20}/>,
         document.getElementById('target'));

样式引入

<link rel="stylesheet" href="./node_modules/bee-slider/build/Slider.css">
//或是
import "./node_modules/bee-slider/src/Slider.scss"
//或是
import "./node_modules/bee-slider/build/Slider.css"

API

|参数|说明|类型|默认值| |:--|:---:|:--:|---:| |min|最小值，默认0|number|0| |max|最大值，默认100|number|100| |step|步长，取值必须大于0，并且可被(max-min)整除。当marks不为空对象时，可以设置step为null，此时Slider的可选值仅有marks标出来的部分，默认1|（number OR null）|1| |dots|是否只能拖拽到刻度上，默认是false|boolean|false| |marks|刻度标记，key的类型必须为number且取值在闭区间min,max内，每个标签可以单独设置样式。格式是{number:string}或者{number:{style:object,label:string}}|object|-| |value|设置当前取值。当range为false时，使用number，否则用[number,number]|number OR [number,number]|0 OR [0,0]| |defaultValue|设置初始取值。当range为false时，使用number，否则用[number,number]|number OR [number,bumber]|0 OR [0,0]| |className|增加额外的class|string|''| |included|marks不为空对象时有效，值为true时表示值为包含关系，false表示并列|boolean|true| |disabled|值为true时，滑块为禁用状态|boolean|false| |vertical|值为true时，Slider为垂直方向|Boolean|false| |railStyle|自定义u-slider-rail的样式|Object|-| |trackStyle|自定义u-slider-track的样式|Object|-| |handleStyle|自定义u-slider-handle的样式|Object|-| |dotStyle|自定义u-slider-dot样式|Object|-| |activeDotStyle|自定义u-slider-dot-active样式|Object|-| |onChange|当Slider的值发生改变时，会触发onChange事件，并把改变后的值作为参数传入。|Function(value)|NOOP| |onAfterChange|与onmouseup触发时机一致，把当前值作为参数传入。|Function(value)|NOOP| |tipFormatterSlider|会把当前值传给tipFormatter，并在Tooltip中显示tipFormatter的返回值，若为null，则隐藏Tooltip。|Function|-|

开发调试

$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-slider
$ cd bee-slider
$ npm install
$ npm run dev