-moz-linear-gradient Breaking When -webkit-linear-gradient Is Added On Jquery Slider

TL;DR -webkit-linear-gradient is breaking -moz-linear-gradient So hear's the conundrum, I'm using the Jquery Slider plugin with two handles on it and I have a gradient as the backg

Solution 1:

You can only set one value for any single style property on a given element. What you've got is what you'd do in a CSS file, but that's not what the .css() method does. It's messing with properties of the style object directly on each affected DOM element. Thus, when you set "-moz-linear-gradient" you're wiping out "linear-gradient", and when you set that you're wiping out the simple color setting.

Set up your styles in CSS by class or something, and then in JavaScript set the class when you want to choose one setting or another.

Solution 2:

I modified the fiddle. Instead of multiple background properties, you need to have multiple css calls. Try this: http://jsfiddle.net/bep9A/1/