Range 区间选择

帮助用户以整体跨度作为参考基准,选择一个数值或区间。

Range 区间选择器

开发指南

何时使用

滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边,对应的,最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

使用注意

  • onChange是和value进行配置做受控处理的。onChange在滑动过程中不会触发,滑动停止后会触发。

  • onProcess不建议内部做setState 进行受控,因为会频繁触发,整个滑动过程中会一直触发。

single slider - from left to right

single slider - from right to left

double slider - from outside to inside

double slider - from inside to outside

Disabled

Disabled

tooltipVisible disabled

tooltipVisible

tooltipVisible disabled

tooltipVisible

基本

基本滑块,当 sliderdouble 时,渲染为双滑块。当 disabledtrue 时,滑块处于不可用状态。

fixedWidth basic

fixedWidth basic with tooltipVisible

fixedWidth with marks

0102030405060708090100
030100

fixedWidth with 0.01 step

range 0 ~ 1024

01024

固定宽度滑动

默认双滑块(sliderdouble),且指定 defaultValue为区间值下可用。范围不可被改变,拖动所选区域改变始末滑块位置。

With minimal and maximal value

0100
0100

Below

0100
0100
0100

Equal division

020406080100
0102030405060708090100
0102030405060708090100

Free

02637100
02637100
0°C26°C37°C100°C

刻度及标识

通过 scalesmarks 属性设置刻度及标识。

Range 0 ~ 1024

01024

Range 0 ~ 1024,step 128

01024

范围

可以通过 minmax 设置范围边界。通过 step(被 max - min 整除) 设置移动的最小步频。min 默认为 0,max 默认为 100.

range 0 ~ 1024

01024

with value and without onChange

01024

double slider controlled

01024

事件

onChange,onProcess 事件

Used with numberPicker


Used with Icon

和 NumberPicker 使用

与 number-picker 结合,外部控制,与 Icon 结合设置边界 Icon

Range 0 ~ 1024

01024

tipRender

tipRender 示例

选择态反转

设置 reverse 为 true, 选中态会反转。

single slider - from left to right

single slider - from right to left

无障碍

通过 Tab 键或其他方式使滑块被聚焦之后,可以通过按下键盘的左右箭头来改变滑块的位置,目前只有单滑块支持无障碍。

API

Range

参数说明类型默认值
slider滑块个数

可选值:
'single'(单个)
'double'(两个)
Enum'single'
min最小值Number0
max最大值Number100
step步长,取值必须大于 0,并且可被 (max - min) 整除。Number1
value设置当前取值。当 slidersingle 时,使用 Number,否则用 [Number, Number]Number/Array<Number>-
defaultValue设置初始取值。当 slidersingle 时,使用 Number,否则用 [Number, Number]Number/Array<Number>-
marks刻度数值显示逻辑(false 代表不显示,array 枚举显示的值,number 代表按 number 平分,object 表示按 key 划分,value 值显示)Boolean/Number/Array<Number>/Objectfalse
marksPositionmarks显示在上方('above')or下方('below')

可选值:
'above', 'below'
Enum'below'
disabled值为 true 时,滑块为禁用状态Booleanfalse
onChange当 Range 的值发生改变后,会触发 onChange 事件,并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用

签名:
Function(value: String/number) => void
参数:
value: {String/number} null
Functionfunc.noop
onProcess滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用

签名:
Function(value: String/number) => void
参数:
value: {String/number} null
Functionfunc.noop
hasTip是否显示 tipBooleantrue
tipRender自定义 tip 显示内容

签名:
Function(value: Number/String) => ReactNode
参数:
value: {Number/String} 值
返回值:
{ReactNode} 显示内容
Functionvalue => value
reverse选中态反转Booleanfalse
pure是否pure renderBooleanfalse
fixedWidth是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间Booleanfalse
tooltipVisibletooltip是否默认展示Booleanfalse
rtl是否已rtl模式展示Booleanfalse

ARIA and KeyBoard

按键说明
Right Arrow控制滑块往右移动
Left Arrow控制滑块向左移动
Tab切换滑动条