3

I am facing problem in changing the tootltip color for seiyria bootstrap-slider, when it is in disabled mode.

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

By using ng-disabled, I disabled the slider but I need to change the tooltip color same as slider handle when it is in disabled mode. As shown in below image.

halfer
  • 19,824
  • 17
  • 99
  • 186
anub
  • 527
  • 1
  • 4
  • 21

1 Answers1

1

Just do it by access the CSS class slider-disabled via CSS like in this DEMO FIDDLE I've created.

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

.slider-disabled .tooltip.top .tooltip-arrow {
  border-top-color: red;
}
lin
  • 17,956
  • 4
  • 59
  • 83