ui-slider 参考

基础用法

<ui-slider value="0.5"></ui-slider>

img

属性

属性名 参数值类型 功能说明
value number, 超过最大值则值更改为最大值,小于最小值则值更改为最小值 组件当前值
focused boolean 控制 focused 状态
disabled boolean 控制 disabled 状态, 设置此属性后不再响应事件
readonly boolean 控制 readonly 状态, 设置此属性后不再响应事件
max number , 默认为 infinite 最大值
min number , 默认为 -infinite 最小值
step number , 默认为 1 滑动步长
precision number , 默认为 20 保留的小数点位数
unnavigable boolean 控制是否可导航, 组件默认可以通过 tab 键获取焦点, 设置此属性后无法通过 tab 获取焦点,并且鼠标获取焦点后不会有 focus 样式

event 事件

事件名称 是否冒泡 触发机制
change 是 滑动、 Input 输入改值或 cancel 改值触发
confirm 是 发生 change 改值后,失去焦点或键入 enter
cancel 是 发生 change 改值后,键入 esc (将恢复原值)

使用效果示例

pressed, focused, disabled 控制状态

<ui-slider placeholder="Normal..."></ui-slider>
<ui-slider placeholder="Focused..." focused></ui-slider>
<ui-slider placeholder="Disabled..." disabled></ui-slider>
<ui-slider placeholder="Readonly..." readonly></ui-slider>

img

条与 "" 相匹配的结果

    没有与 "" 匹配的结果