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 background color to give the outside ranges some color. What I'm trying to do is update the percentages on the gradients when the slider moves. It works in Chrome / Safari, but not in Firefox when both the -moz and -webkit tags are used. The value is being pulled from the position of the first slider.
When I only have the -moz-linear-gradient tag it works but as soon as I add the -webkit-linear-gradient tag it breaks for Firefox.
Here's the code
HTML:
<div id="traffic-allocation"> <h4 id="traffic-allocation-hed">Traffic Allocation <small>Change by dragging handles right or left and applying changes</small></h4> <div class="slideContainer"> <div id="slider-direct" class="slider"></div> </div> </div> <div class="labelBox"> <div class="control-box" id="control-box-direct"> <input id="control-direct" type="text" value="35%" class="allocation-control" /> <div class='allocation-control-wrapper'> <h4 class="variantLabel mycontrol-label" id="mycontrol-label-direct">Control: </h4> </div> </div> </div>
JavaScript:
$(function() { $( '.slider' ).slider({ range: true, values: [35, 70], min: 0, max: 100, step: 5, slide: function( e, ui ) { //Derive calling (class selector) element's ID and set the IDs for its "companion" value displays: theSegment = e.target.id.slice(7); theControl = '#control-' + theSegment; $( theControl ).val( ui.values[ 0 ] + '%' ); var slidercolor = $('#control-direct').val(); $('.ui-slider-horizontal').css({ background: '#0e76bc', /* Old browsers */ background: 'linear-gradient(to right, #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' ,/* W3C */ background: '-moz-linear-gradient(left, #0e76bc '+slidercolor+', #e78f08 '+slidercolor+')', /* FF3.6+ */ background: '-webkit-linear-gradient(left, #0e76bc '+slidercolor+',#e78f08 '+slidercolor+')' /* Chrome10+,Safari5.1+ */ }) } });
CSS:
h1 { font-family: Helvetica, Arial; font-weight: bold; font-size: 18px; } body, p{ font-family: Helvetica, Arial; } .ui-slider-horizontal{ background: '#0e76bc', /* Old browsers */ background: linear-gradient(to right, #0e76bc 50%,#e78f08 50%); /* W3C * background: -moz-linear-gradient(left, #0e76bc 50%, #e78f08 50%); /* FF3.6+ */ background: -webkit-linear-gradient(left, #0e76bc 50%,#e78f08 50%); /* Chrome10+,Safari5.1+ */ } .ui-widget-header { background: none repeat scroll 0 0 #292668; border: 1px solid #CCCCCC; color: #292668; font-weight: bold; }
Here's a link to see what's going on and the css cause there's a lot of it :). (open in chrome/safari to see what it's supposed to do and firefox to see it broken)
http://jsfiddle.net/DrewLandgrave/bep9A/
Thank you in advance :)