Firefox下滑动条联动Google Charts图表渲染异常如何解决

• 错误使用了ondurationchange事件：该事件为媒体元素（audio/video）专属事件，仅在媒体资源时长发生变化时触发。Chrome存在非标准容错逻辑，会意外在range元素上触发该事件，而Firefox严格遵循W3C规范，不会在滑块元素上触发该事件，导致交互逻辑无法执行。
• 事件绑定不符合浏览器标准：你仅绑定了onclick事件触发图表更新，Chrome中滑动滑块释放时会触发click事件，Firefox中滑动操作仅会触发input和change事件，不会触发click，导致滑动后逻辑不执行。
• 父容器样式可能导致交互失效：滑块父容器设置了height: 0 !important，Firefox会严格继承父容器高度判定可交互区域，若滑块本身未设置独立高度，会被判定为无交互区域，无法响应操作。

1. 修正事件绑定 #

删除无用的ondurationchange属性，替换onclick为oninput事件，保证滑动、点击操作都能触发更新逻辑，修改后滑块代码如下：

<div class="slidecontainer" style="height: 0 !important;">
<input type="range" min="1" max="5" aria-orientation="vertical" value="#{IVB.iQ.q1}" class="slider"
id="myRange" oninput="asd()" onchange="#{IVB.yAL()}"/>
</div>

• oninput：滑块数值发生任何变化时实时触发，适配点击、滑动全场景，兼容所有主流浏览器
• onchange：滑块数值确认修改（释放滑块、失焦）时触发，保留原有服务端逻辑绑定

2. 补充垂直滑块兼容样式（若使用垂直滑块） #

aria-orientation仅为无障碍属性，不会修改滑块实际显示方向，需要补充CSS适配Firefox的垂直滑块渲染：

.slider {
  -webkit-appearance: slider-vertical; /* Chrome、Edge兼容 */
  appearance: slider-vertical; /* 标准属性 */
  writing-mode: bt-lr; /* Firefox专属垂直滑块配置 */
  height: 120px; /* 自行调整适配页面，覆盖父容器0高度的影响 */
  position: relative; /* 避免父容器0高度导致滑块被隐藏 */
}

如果不需要垂直滑块，可以直接删除aria-orientation属性，使用默认水平样式即可。

3. 补充逻辑容错 #

对滑块取值做强制类型转换，避免不同浏览器返回值类型差异导致的判断异常：

function asd(){
  // 强制转为数字类型，避免字符串比较的兼容问题
  const sliderValue = parseInt(document.getElementById("myRange").value, 10);
  document.getElementById("j_idt26:est").value = sliderValue;
  updateData();
}

drawChart函数中对应的取值判断也建议同步改为数字比较：if(sliderValue === 1)

内容的提问来源于stack exchange，提问作者Martin Hofman