seiyria bootstrap-sliderが無効モードになっているとき、ツールチップの背景色を変更するにはどうすればよいですか？

Question

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：NG-無効に使用することにより

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

、私はスライダーを無効にしますが、それは無効モードにあるとき、私は、スライダーのハンドルと同じツールチップの色を変更する必要があります。下の図のようになります。

Answer 1

CSSクラスslider-disabledにアクセスして、このDEMO FIDDLEのようにCSSでアクセスしてください。

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

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