Firefox jQuery on change event not working as expected

Question

I am attempting to change the background gradient of a range slider element in Firefox after the handle has been dragged. I've got this working in Chrome very well, but for some reason the jQuery .on('change', function()); event isn't working as expected in FF.

I have a base style set for the range slider that looks like:

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

Then when the slider is changed, I am changing out the background with:

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 + ')');

});

In Chrome (I've left out the -webkit- styles for readability) this will set everything behind the handle to the specified color. In Firefox however, the style isn't added when the handle is dragged. I do notice the style being added when the handle is dragged back to "0" or it's original position, but not when the slider actually has a value other than 0.

I've created a fiddle with the code. Please do not critique the checkBrowser() function included, that's simply there for testing purposes.

https://jsfiddle.net/wz0vyL7a/2/

If you notice, this works very well in Chrome & Safari but nothing changes with Firefox. As stated, I can clearly see the style change happen AFTER the handle has been dragged then dragged back to 0, but it is removed immediately after dragging it to anything other than 0 again.

Stryner Stryner · Accepted Answer · 2015-08-17T18:45:05

linear-gradient expects a percentage. You need to add a '%' and multiply it by 100:

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

See updated fiddle: https://jsfiddle.net/wz0vyL7a/5/

Firefox jQuery on change event not working as expected

1 Answers