在 JQuery Slider 上添加 -webkit-linear-gradient 时 -moz-linear-gradient 中断答案

【问题标题】：-moz-linear-gradient breaking when -webkit-linear-gradient is added on JQuery Slider在 JQuery Slider 上添加 -webkit-linear-gradient 时 -moz-linear-gradient 中断
【发布时间】：2023-03-08 16:24:01
【问题描述】：

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

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

当我只有 -moz-linear-gradient 标签时，它可以工作，但是一旦我添加 -webkit-linear-gradient 标签，它就会在 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：

$(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 中查看它是否损坏）

http://jsfiddle.net/DrewLandgrave/bep9A/

提前谢谢你:)

【问题讨论】：

标签： javascript jquery css slider linear-gradients

【解决方案1】：

您只能为给定元素上的任何单个样式属性设置一个值。你所拥有的是你在 CSS 文件中所做的，但这不是 .css() 方法所做的。它直接在每个受影响的 DOM 元素上弄乱了 style 对象的属性。因此，当您设置“-moz-linear-gradient”时，您将消除“linear-gradient”，而当您设置时，您将消除简单的颜色设置。

在 CSS 中按类或其他方式设置样式，然后在 JavaScript 中设置类，当你想选择一种或另一种设置时。

【讨论】：

这也是一个很好的答案

【解决方案2】：

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

【讨论】：

@DrewLandgrave 它仍然无法正常工作，原因与我在回答中描述的相同。
@Pointy 我正在使用 Firefox 并且小提琴有效。它类似于在 css-tricks.com/moving-highlight 找到的 jQuery 调用
@DrewLandgrave 它应该是什么样子？当我在 Firefox 中尝试这个小提琴时，我没有看到任何渐变。