Search code examples
javascriptangularjstwitter-bootstrapuisliderangular-ui

AngularUI Slider in an AngularUI Modal

I am a big fan of the angularUI slider that has been created without jQuery and have been using it. I need to use it within an angularUI modal however and it would appear that the modal background is interfering with the slider background (i.e. overriding it).

I have created a plunker to demonstrate the issue: http://plnkr.co/edit/FIGIvIE5bfm53tlWVR7R?p=preview

Any suggestions for how to get the slider to display correctly in the modal would be much appreciated! Thanks.

Solution

  • This has been solved via the addition of the following CSS: 

    .ui-slider-default ui-slider-thumb, 
.ui-slider-default [ui-slider-thumb], 
.ui-slider-default .ui-slider-thumb {
  z-index: 1;
}

ui-slider:after, [ui-slider]:after, .ui-slider:after {
  z-index: 0;
}

    See plunker: http://plnkr.co/edit/HPOAq0oV6GnE0JevuZI4?p=preview