Range范围输入模块

Range模块可实现单滑块和双滑块的范围选择,支持冻结功能,支持使用标尺,完美替代原生range组件。

简单使用

divinput节点使用ax-range属性即可创建一个普通的0~100的范围滑块。

  • 输出
  • HTML
  •                 
                    
                

使用id+new形式也可以创建范围滑块。

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    new ax.Range('#demo')
                    
                

递增和递减

如果需要显示递增和递减按钮可设置参数button:truebutton.enable:true

  • 输出
  • HTML
  •                 
                    
                

参数button原本是一个对象,除了enable属性,还有如下如下:

  • step:步进,默认值为1,与参数step相同
  • decrease:递减按钮的html内容,默认为减号图标
  • increase:递增按钮的html内容,默认为加号图标
  • 输出
  • 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 恢复初始值回调