bee-slider

2.0.2 • Public • Published

bee-slider

npm version Build Status Coverage Status devDependency Status NPM downloads Average time to resolve an issue Percentage of issues still open

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

Package Sidebar

Install

npm i bee-slider

Weekly Downloads

55

Version

2.0.2

License

MIT

Unpacked Size

148 kB

Total Files

36

Last publish

Collaborators

  • duxue
  • jwangyangls
  • shaohlr
  • honely1314
  • xiaoshutong
  • yonyoufed
  • jonyw
  • guoyongfeng
  • kvkens
  • whizbz
  • npm_yx
  • bjyxszd
  • tinper-bot
  • houjitong
  • gaox2025f
  • gcht163
  • cnkvkens
  • diozhu
  • wangjings123
  • ahua52