layui slider 通过初始化时配置 onchange 回调实现实时监听拖动值，该函数在每次值变化（含拖拽中）触发；外部读取用 layui.slider.val() 方法。
layui slider 怎么监听滑块拖动时的实时值？
直接用 onchange 回调，别等 change 事件——后者只在鼠标松开/键盘释放后触发，而你想要的是拖动过程中的连续反馈。
初始化 slider 时必须显式传入 onchange 函数，它会在每次值变化（包括拖拽中）被调用，参数就是当前数值：
layui.slider.render({
elem: '#sliderDemo',
min: 0,
max: 100,
value: 30,
onchange: function(value) {
console.log('当前值：', value); // 拖着走，这里就一直打
}
});
-
onchange是 layui 2.8+ 的写法；旧版（如 2.7）用的是change（注意：这个是事件名，不是回调函数名），但行为一样——只要值变就触发 - 如果没传
onchange，又没手动绑定change事件，那拖动时完全拿不到中间值 - 不要试图用
input事件监听 slider 的<input type="range">元素——layui 会接管并屏蔽原生行为
怎么在外部主动读取 slider 当前值？
用 layui.slider.val()，传入绑定的元素或选择器即可，返回 number 类型的当前值。
// 初始化后任意时刻调用
var currentValue = layui.slider.val('#sliderDemo'); // → 30
// 或传 DOM 元素
var el = document.querySelector('#sliderDemo');
var val = layui.slider.val(el);
- 这个方法不依赖初始化时是否设了
onchange，纯读取 - 如果 slider 还没 render（比如 DOM 没加载完就调了），
val()会返回undefined，记得加判断 - 注意：
val()返回的是原始数值，不是字符串，别用==做宽松比较
为什么 onchange 不触发？常见原因有哪些？
最常踩的坑是：DOM 元素不存在、重复 render、或用了错误的选择器。
- 确保
elem对应的元素在调用render()前已存在于 DOM 中（比如放在document.ready或layui.use回调里） - 不要对同一个元素多次调用
render()，否则旧的onchange会被覆盖，且可能引发控制台警告"The element has been rendered" -
elem必须是有效的选择器字符串（如'#id'、'.class'）或 DOM 元素，不能是 jQuery 对象 - 如果 slider 被动态插入（比如 AJAX 加载后），需在插入后再 render，不能靠初始页面加载时一次搞定
value 变化后怎么同步更新其他元素（比如 input 或 span）？
在 onchange 里直接操作 DOM 即可，无需防抖——slider 自身拖动频率可控，且用户不会高频抖动。
onchange: function(value) {
document.getElementById('showValue').innerText = value;
document.getElementById('hiddenInput').value = value;
}
- 避免在
onchange里做重渲染或发请求——拖动过程中会频繁触发，容易卡顿或发一堆冗余请求 - 如果真要联动异步操作（比如搜索过滤），建议用
setTimeout+ 标志位做简单节流，而不是依赖change事件（它只在结束时触发，体验滞后） - 注意：
value是 number，写入input.value会自动转字符串，但用innerText或textContent更稳妥
