Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including bee-slider with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var beeSlider = require("bee-slider")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

bee-slider v2.0.2

Slider ui component for react

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最小值,默认0number0
max最大值,默认100number100
step步长,取值必须大于0,并且可被(max-min)整除。当marks不为空对象时,可以设置step为null,此时Slider的可选值仅有marks标出来的部分,默认1(number OR null)1
dots是否只能拖拽到刻度上,默认是falsebooleanfalse
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增加额外的classstring''
includedmarks不为空对象时有效,值为true时表示值为包含关系,false表示并列booleantrue
disabled值为true时,滑块为禁用状态booleanfalse
vertical值为true时,Slider为垂直方向Booleanfalse
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
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free