-
组件布局 Layout视图 View导航 Navigation反馈 Feedback
滑块 Slider
滑动型输入器,展示当前值和可选范围。
何时使用
当用户需要在数值区间/自定义区间内进行选择时
如何使用
import { Slider } from 'tinper-bee';
or
import Slider from 'bee-slider';
import 'bee-slider/build/Slider.css';
能力特性
标准slider
基础的slider
查看源码Basic Slider,`step默认1`
Basic Slider,`step=20 className="owner-slider"`
Basic Slider, disabled
Controlled Slider,不可改变
带有dots的slider(dots间距同step)
基础的slider
查看源码Basic Slider,`step=20, dots `
Basic Slider,`step=10, dots, dotStyle={borderColor: 'orange'}, activeDotStyle={borderColor: 'yellow'}`
自定义slider
自定义slider样式(track,handle,rail等样式自定义)
查看源码Slider with custom handle and track style.
带有marks的slider
带有marks标签的step
查看源码(1)Slider with marks,`steps默认是1`
(2)Slider with marks and `steps=20`
(3)Slider with marks and `dots steps=20`
(4)Slider with marks, `step=null`,因此step = marks
(5)Slider with marks, `included=false`
(6)Slider with marks and `steps=10,included=false`
(7)Range with marks
(8)Range with marks and steps
rangeSlider
数组变化的slider
查看源码Basic Range,`allowCross=false step默认是1 defaultValue=[0, 20]`
Basic Range,`allowCross=true step默认是1 defaultValue=[10, 40]`
Basic Range,`disabled defaultValue=[0, 20]`
Basic Range,`step=20 defaultValue=[20, 80]`
Basic Range,`step=20, dots defaultValue=[20, 40]`
Range as child component
竖直方向的slider
竖直vertical
查看源码Slider with `marks, step=null`
Slider with `marks and steps=25`
Slider with `marks and steps默认是1 included=false`
Range with `marks steps默认是1,`
Range with `marks and steps=10`
带输入框的slider
和 数字输入框 组件保持同步。
查看源码Customized Range
Customized Range
带tip的slider
和 tip展示 组件保持同步。
查看源码Slider with Tooltip
Range with Tooltip
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内,每个标签可以单独设置样式 | object | {number:string} OR {number:{style:object,label:string}} |
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 | - |
注意事项
暂无