Javascript 更改事件上的Firefox jQuery未按预期工作

我试图在拖动句柄后更改Firefox中范围滑块元素的背景渐变。我已经在Chrome中很好地实现了这一点，但出于某种原因，jQuery

.on（'change'，function（））事件在FF中未按预期工作

我为范围滑块设置了一个基本样式，如下所示：

background-image: -moz-linear-gradient(top, #4798b6 0%, #90a3a6 0%);

然后，当滑块更改时，我将使用以下内容更改背景：

jQuery('input[type="range"]').on('change', function() {
    var val = (jQuery(this).val() - jQuery(this).attr('min')) / (jQuery(this).attr('max') - jQuery(this).attr('min'));

    jQuery(this).css('background-image', '-moz-linear-gradient(left center, #4798b6 ' + val + ', #90a3a6 ' + val + ')');

});

在Chrome中（为了可读性，我省略了
-webkit-
样式），这将把句柄后面的所有内容设置为指定的颜色。但是，在Firefox中，拖动句柄时不会添加样式。我确实注意到当手柄被拖回“0”或其原始位置时添加的样式，但当滑块实际具有除0以外的值时不会

我对代码进行了修改。请不要批评包含的
checkBrowser（）
函数，它只是为了测试目的


如果您注意到，这在Chrome和Safari中非常有效，但在Firefox中没有任何变化。如上所述，我可以清楚地看到样式更改发生在将句柄拖动到0之后，但在再次将其拖动到0以外的任何位置之后，样式更改立即被删除。
线性渐变需要一个百分比。您需要添加“%”并将其乘以100：

jQuery(this).css('background-image', '-moz-linear-gradient(left center, #4798b6 ' + (val*100) + '%, #90a3a6 ' + (val*100) + '%)');

请参阅更新的小提琴：