Slider 滑块

滑块,通过拖动滑块来选择合适数值。

Slider

Props

Prop NameTypeRequiredDefaultDescription
value
custom
值,受控
defaultValue
custom
0
默认值,非受控
range
bool
false
是否为双滑块模式
onChange
func
() => {}
修改回调
onLastChange
func
() => {}
拖拽结束、输入回车、输入失焦、数字输入框上下按钮等时触发
disabled
bool
是否禁用
min
number
0
最小值
max
number
100
最大值
step
union
1
每次变动的大小,传入的(最大值-最小值)必须为step的整数倍,大于0
marks
object
标记
sliderClassName
string
slider 类名
sliderStyle
object
slider 样式
numberInput
object
number input 的自定义 props,为null时隐藏
isSensitive
bool
是否灵敏的触发onChange,为true时当NumberInput中实时输入有效值时会触发onChange
numberInputTipFormatter
func
输入框提示语格式化,传入null隐藏
@param
包含当前值、生效值等
tipFormatter
func
提示语格式化,传入null隐藏
@param
当前值
size
enum
'md'
尺寸

说明

  • 这是 Slider 组件

演示

普通使用

VIEW CODE ( LIVE )

value / defaultValue - 受控 / 非受控

VIEW CODE ( LIVE )

range - 双滑块模式

VIEW CODE ( LIVE )

min / max - 最大值 / 最小值

VIEW CODE ( LIVE )

marks - 标记

VIEW CODE ( LIVE )

disabled - 禁用

VIEW CODE ( LIVE )

isSensitive - 实时反馈

isSensitive 仅在 range 为 false 条件下生效

VIEW CODE ( LIVE )

step - 步长

VIEW CODE ( LIVE )

tipFormatter - 提示语格式化

VIEW CODE ( LIVE )

numberInput - 自定义 NumberInput

仅在 range 为 false 条件下生效

VIEW CODE ( LIVE )

numberInputTipFormatter - 提示语格式化

仅在 range 为 false 条件下生效

VIEW CODE ( LIVE )
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司