在JQuery Slider上添加-webkit-linear-gradient时，-moz-linear-gradient break [英] -moz-linear-gradient breaking when -webkit-linear-gradient is added on JQuery Slider

问题描述

TL; DR -webkit-linear-gradient正在打破-moz-linear-gradient

TL;DR -webkit-linear-gradient is breaking -moz-linear-gradient

所以听到这个难题，我正在使用带有两个的Jquery Slider插件在它上面的手柄，我有一个渐变作为背景颜色，以给外部范围一些颜色。我想要做的是在滑块移动时更新渐变的百分比。它适用于Chrome / Safari，但在使用-moz和-webkit标记时不适用于Firefox。该值是从第一个滑块的位置拉出的。

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.

当我只有-moz-linear-gradient标签时，它可以正常工作，但是只要我添加-webkit-linear-gradient标签就会中断Firefox。

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.

这是代码

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：

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;
}

这是一个链接，可以看到发生了什么，而css因为有很多它:)。 （在chrome / safari中打开以查看它应该做什么以及firefox看它打破了）

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/

提前谢谢：）

推荐答案

我修改了小提琴。您需要有多个css调用，而不是多个背景属性。试试这个： http://jsfiddle.net/bep9A/1/

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

这篇关于在JQuery Slider上添加-webkit-linear-gradient时，-moz-linear-gradient break的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！