Range范围输入模块
Range模块可实现单滑块和双滑块的范围选择,支持冻结功能,支持使用标尺,完美替代原生range组件。
简单使用
对div
或input
节点使用ax-range
属性即可创建一个普通的0~100
的范围滑块。
使用id+new
形式也可以创建范围滑块。
递增和递减
如果需要显示递增和递减按钮可设置参数button:true
或button.enable:true
。
参数button原本是一个对象,除了enable属性,还有如下如下:
- step:步进,默认值为1,与参数step相同
- decrease:递减按钮的html内容,默认为减号图标
- increase:递增按钮的html内容,默认为加号图标
基础配置
属性 |
类型 |
默认值 |
说明 |
name |
string |
'' |
隐藏input的name属性 |
step |
number |
1 |
滑块步进值 |
max |
number |
100 |
最大值 |
min |
number |
0 |
最小值 |
value |
number/array |
0 |
初始值 |
axis |
'x'/'y' |
'x' |
滑动方向 |
disabled |
boolean |
false |
是否禁用 |
显示配置
属性 |
类型 |
默认值 |
说明 |
size |
'sm'/'md'/'lg' |
'md' |
滑块尺寸 |
full |
boolean |
false |
是否横向铺满 |
classes |
string |
'' |
追加样式类 |
limitShow |
boolean |
true |
是否显示极限值气泡 |
tipShow |
boolean |
true |
是否显示滑块气泡 |
多滑块配置
属性 |
类型 |
默认值 |
说明 |
multiple |
boolean |
false |
是否启用双滑块 |
locked |
boolean |
false |
是否锁定滑块间距 |
separator |
string |
'~' |
input值分隔符 |
hyphen |
string |
'~' |
气泡值连接符 |
范围配置
属性 |
类型 |
默认值 |
说明 |
fence.enable |
boolean |
false |
是否启用有效范围 |
fence.min |
number |
0 |
有效范围最小值 |
fence.max |
number |
100 |
有效范围最大值 |
按钮配置
属性 |
类型 |
默认值 |
说明 |
button.enable |
boolean |
false |
是否启用增减按钮 |
button.decrease |
string |
'' |
减少按钮HTML |
button.increase |
string |
'' |
增加按钮HTML |
keyboard |
boolean |
false |
是否支持键盘操作 |
标尺配置
属性 |
类型 |
默认值 |
说明 |
ruler.enable |
boolean |
false |
是否显示标尺 |
ruler.majorEqual |
number |
4 |
大刻度等分数 |
ruler.minorEqual |
number/'auto' |
'auto' |
小刻度等分数 |
ruler.labels |
array |
[] |
大刻度标签 |
结果显示配置
属性 |
类型 |
默认值 |
说明 |
result.enable |
boolean |
false |
是否显示结果 |
result.target |
string/null |
null |
结果显示容器选择器 |
回调函数
属性 |
类型 |
默认值 |
说明 |
onSet |
function |
null |
设置新值后回调 |
onToStart |
function |
null |
到达最小值回调 |
onToEnd |
function |
null |
到达最大值回调 |
onEnabled |
function |
null |
启用后回调 |
onDisabled |
function |
null |
禁用后回调 |
onRestored |
function |
null |
恢复初始值回调 |