jQuery ui slider 动态内联样式进度

Question

我在 Backbone View 中有一个 jQuery slider 。 View 动态更新 slider 的位置。

我想将内联样式添加到与 slider 值相关的 div.ui-slider-range。

现在我有一个从 slider 更改事件回调调用的 View 方法。这似乎根本不附加样式。我没有收到任何错误，并且我已验证在更改值时调用了 View 方法。

我注意到 div.ui-slider-range 具有 width 属性，由 jquery ui 内联应用于它。我猜这就是给我带来问题的原因。无论如何，我可以让 jquery ui 为我添加内联样式吗？

如有任何帮助，我们将不胜感激。

编辑:我描述 linear-gradient Prop 的方式似乎有问题。如果我将它设置为线性渐变(左、黑、白)，它会按预期工作。有什么想法吗？

render: ()=>
  @$el.slider
    range: 'min'
    min: 0
    max: 100
    value: 0
    animate: true
    step: 0.01
    change: (e, ui) =>
      @updateStyle ui.value
  @uiRange = @$el.find('.ui-slider-range')

updateStyle: (width) ->
  @uiRange.css 'backgound', "linear-gradient(left, #6641cd, #6641cd #{width}%, #15b2e7)"

Answer 1

好吧，事实证明这是 jQuery 的问题，也许只是需要更好的文档

问题在于 jQuery 添加了 linear-gradient 属性。由于 linear-gradient prop 需要一个前缀，具体取决于系统，您需要确保添加正确的前缀。如果您在 Chrome 上进行开发，则需要添加 -webkit- 前缀，否则 jQuery 不会添加该属性。如果您是 Firefox，则需要 -moz- 前缀。如果系统上没有正确的前缀，jQuery 将忽略该 css 属性。

现在我遇到的问题是尝试添加所有背景前缀 Prop 。 jquery 似乎只会添加最后一个属性，如果最后一个属性不是正确的前缀，它将忽略所有这些属性。或者更有可能是单独添加每个 Prop ，因为它们都是背景 Prop ，每个都会覆盖最后一个。