登录
帮助菜单
概述
平台组成
安装部署
平台基础数据管理
组织机构管理
用户管理
用户组管理
机构授权管理
文件访问权限
自定义IP管理
编辑器管理
上传类型管理
功能模版管理
WEB应用管理
应用管理
视频
投票
自定义列表
工作流
新闻频道
文档库
网站
前端css样式
图标文字
背景、边框、字体颜色
表格
function函数
顶部弹窗
中部弹窗
底部弹窗
选择确认弹窗
组件
js分页
滑动删除
多滑块范围选择器
当前位置:
企业应用开发平台
-
帮助
返回
多滑块范围选择器
在使用前请引入一下代码:
<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:点击区域的结束值
运行效果:
效果代码
加载
复制
<byq-ranges id='ParagraphRanges' min='0' max='100' step='1' values='[30,60]' showtooltip='true' fontsize='10'></byq-ranges>
图片预览
著作权人:白玉群 电话:18131632810 邮箱:yqbai@live.cn 软著登记号:
2021SR1500024
官网:
www.yqbai.com
ICP备案号:
冀ICP备16025109号-1