Rangeslider强调背景在JQuery Mobile中不起作用

Question

我在 JQuery Mobile 1.4.2 中使用 rangelider ，我想更改突出显示背景，但我无法使其正常工作。

我通过Theme Roller创建了我的主题，我有两个：主题A（左图）和主题B（右图）。我希望我的rangelider就像主题B。

我尝试在rangelider中编写 data-track-theme ，但高亮背景消失了：

<div data-role="rangeslider" data-mini="true" data-track-theme="b">
    <label for="range-1a">Rango de números a utilizar (1-100)</label>
    <input type="range" min="1" max="100" value="1" >
    <input type="range" min="1" max="100" value="30">
</div>

看起来像这样：

我也试图用 CSS 更改高亮背景：

.ui-slider-track{
  background: #FFCC99!important;
}
.ui-slider .ui-btn-active{
  background: #FF8000!important;
}
.ui-rangeslider .ui-btn-active{
  background: #FF8000!important;
}

一切似乎都很好，但是当我移动左侧控制时，高光背景消失，当我移动右侧控制时，高亮背景再次出现。

任何想法如何解决？谢谢！

Answer 1

不要在CSS中定位.ui-btn-active，而是定位.ui-slider-bg：

.ui-rangeslider-sliders .ui-slider-track {
    background-color: #F5CB98;
}
.ui-rangeslider-sliders .ui-slider-bg {
    background-color: #EA7E2A !important;
}

  

正在使用 DEMO

Answer 2

即使@ezanker的答案看起来不错，出于某些原因对我来说也不起作用，并且在移动左侧控制时仍然存在问题。可能与创建的JQuery Mobile主题存在冲突。

我可以解决它将data-track-theme="b"放入rangeliders并删除CSS中的第一条规则（ui-slider-track）。我的CSS看起来像这样：

.ui-slider .ui-btn-active{
    background: #FF8000!important;
}

.ui-rangeslider .ui-btn-active{
    background: #FF8000!important;
}