登录
帮助菜单
平台基础数据管理
应用管理
当前位置:
-帮助
多滑块范围选择器
在使用前请引入一下代码:
<link href="/App_Themes/Blue/Default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/images/js/byq_js.js"></script>
控件说明:
ByqRanges 是一款多滑块范围选择控件,支持自定义滑块样式、数值范围、步长、提示框、时间格式化等功能,适用于音频 / 视频时间轴、多区间筛选、参数调节等场景。
核心特性:
支持多滑块添加 / 删除(双击滑块删除)
两种滑块样式:圆形(circle)、竖线(line)
高度可配置:范围、步长、间距、字体大小等
支持数值 / 时间两种显示格式
丰富的事件回调(滑块拖动、添加 / 删除、轨道点击)
支持 CSS 变量自定义样式
响应式设计,适配不同容器宽度
属性说明:
序号
属性名
类型
默认值
说明
1
min
Number
0
滑块最小值
2
max
Number
100
滑块最大值
3
step
Number
1
滑块拖动时的步长(数值会自动对齐步长)
4
values
String
初始滑块值,支持 JSON 数组("[10,30]")或逗号分隔字符串("10,30")
5
showtooltip
Boolean
true
是否显示滑块下方的数值提示框(支持 "true"/"false" 或仅写属性名)
6
showtime
Boolean
false
是否将数值格式化为时分秒(假设数值为秒数,格式:HH:MM:SS)
7
fontsize
Number
12
提示框文字大小(单位:px)
8
thumb-style
String
circle
滑块样式,可选值:"circle"(圆形)、"line"(竖线)
9
line-thumb-width
Number
1
竖线滑块宽度(仅 thumb-style="line" 时生效,单位:px)
10
line-thumb-height
Number
16
竖线滑块高度(仅 thumb-style="line" 时生效,单位:px)
11
min-line-spacing
Number
1
竖线滑块最小间距(仅 thumb-style="line" 时生效,单位:px)
公开方法:
序号
方法名
作用
参数说明
返回值
1
addSlider()
添加一个新滑块
initialValue(可选):初始值;silent(可选,默认 false):是否静默添加(不触发 slider-modify 事件)
新滑块的索引(Number)
2
removeSlider(index)
删除指定索引的滑块
index(必填):滑块索引(从 0 开始)
成功删除返回 true,失败返回 false
3
getValues()
获取所有滑块值(已排序)
排序后的数值数组(Number [])
事件监听
序号
事件名
触发时机
事件详情
1
input
滑块拖动过程中实时触发(持续更新)
event.detail 包含以下字段:
values:当前所有滑块值(已排序)
formattedValues:格式化后的数值(showtime=true 时为时分秒字符串数组,否则为 null)
thumbStyle:当前滑块样式
2
change
滑块拖动时触发(与 input 触发时机一致,可用于确认最终值)
同 input 事件
3
slider-modify
添加或删除滑块时触发
event.detail 包含以下字段:
action:操作类型("add" 或 "remove")
index:操作的滑块索引
value:操作的滑块数值
total:当前滑块总数
values:当前所有滑块值(已排序)
thumbStyle:当前滑块样式
4
sliderclick
点击滑块轨道(非滑块 / 提示框区域)时触发
event.detail 包含以下字段:
sliderIndex:建议添加滑块的索引
startValue:点击区域的起始值
endValue:点击区域的结束值
运行效果:
效果代码
加载
复制
著作权人:白玉群  电话:18131632810  邮箱:yqbai@live.cn  软著登记号:2021SR1500024
官网:www.yqbai.com  ICP备案号:冀ICP备16025109号-1