1

我正在使用带有JQuery Mobile 1.4.2的范围滑块,我想更改突出显示背景,但我无法使其正常工作。

我通过Theme Roller创建了我的主题,我有两个:主题 A(左图)和主题 B(右图)。我希望我的 rangeslider 像主题 B。

rangeslider 主题(A-left,B-rigth)

我尝试在范围滑块中写入数据轨道主题,但突出显示背景消失了:

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

一切似乎都很好,但是当我移动左侧控件时,突出显示背景消失,而当我移动右侧控件时,突出显示背景再次出现。

正确的范围滑块突出显示背景

知道如何解决吗?谢谢!

4

2 回答 2

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

工作演示

于 2014-08-07T14:23:35.240 回答
1

即使@ezanker 的答案看起来不错,由于某种原因对我不起作用,而且移动左控件时的问题仍然存在。可能是与创建的 JQuery Mobile 主题发生冲突。

我可以解决它,将其放入data-track-theme="b"范围滑块并删除我拥有的 CSS 中的第一条规则(ui-slider-track)。我的 CSS 看起来像这样:

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

.ui-rangeslider .ui-btn-active{
    background: #FF8000!important;
}
于 2014-08-07T15:31:39.673 回答