如何在seiyria bootstrap-slider处于禁用模式时更改工具提示背景颜色?

时间:2017-05-03 12:52:33

标签: javascript html angularjs bootstrap-slider

我在改变seiyria bootstrap-slider的tootltip颜色时遇到问题,当它处于禁用模式时。

HTML:

<slider ng-model="myCtrl.sliderValue" ng-min="0" 
        ng-disabled="myCtrl.ischlddsble"
        ng-max="5" 
        step="1" 
        value="myCtrl.sliderValue" 
        ticks="myCtrl.sliderTicks()"
        formatter="myCtrl.myFormatter" 
        tooltip="always" 
        id="divID"></slider>
<input type="checkbox" 
       ng-model="myCtrl.ischlddsble" 
       ng-click="myFunc()"/>

JavaScript的:

function myFunc(x, _this) {
    if (_this.checked) {
        x.style.backgroundColor = '#0000FF';
    } else {
        x.style.backgroundColor = '#FF0000';
    }
}

通过使用ng-disabled,我禁用了滑块,但是当它处于禁用模式时,我需要更改与滑块手柄相同的工具提示颜色。如下图所示。

1 个答案:

答案 0 :(得分:1)

只需通过CSS访问CSS类slider-disabled,就像我创建的 DEMO FIDDLE 一样。

.slider-disabled .tooltip-inner {
    background-color: red;
}

.slider-disabled .tooltip.top .tooltip-arrow {
  border-top-color: red;
}