自定义滑块点击重置按钮后渐变样式未同步重置如何修复

问题原因 #

通过jQuery的val()方法修改滑块输入值时，浏览器不会自动触发滑块预先绑定的input事件，负责更新渐变轨道样式的updateRangeEl方法未被调用，导致渐变样式没有和数值同步复位。

修复方案 #

不需要修改原有滑块逻辑，只需要在重置按钮的点击事件中，修改完数值后手动触发滑块的input事件，即可复用原有逻辑同步更新渐变样式，修改后的重置按钮代码如下：

$('.resetbtn').click(function(){
      $('#slider, .fntSz').val(40);
      // 手动触发滑块input事件，同步更新渐变样式
      $('#slider').trigger('input');
});

原理说明 #

原有代码已经在滑块的input事件中写好了样式更新、数值同步的逻辑，手动触发该事件后，浏览器会自动执行对应的处理逻辑，同时兼容IE、老Edge和现代浏览器的适配逻辑，不需要额外做浏览器判断。

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