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