csstypescriptangular-cdk-drag-dropangular14

div with cdkDrag on top of mat-slider doesn't hide the slider button

I'm writing an angular14 application.

I have a div element that has cdkDrag for it to be moveable, and behind it i have a few buttons and sliders and i noticed that the slider button is still visible when i drag that div on top of that slider.

mat-slider visible behind cdkDrag div

i reproduced the issue on stackblitz with this template:

hello
<mat-slider
  thumbLabel
  tickInterval="1000"
  step="1000"
  min="0"
  max="100000"
  aria-label="units"
></mat-slider
>goodbye
<div
  cdkDrag
  style="background-color: white; 
  border: 1px solid black; padding: 5em;
  position: relative; bottom: 40px;">
  hello
</div>

Stackblitz editor url

i tried changing z-index of that div but results are the same.

any ideas how to resolve the issue?

Solution

  • You are on the right track with z-index. You just need to set on the right classes and in the right css.

    styles.css

    .mat-slider-thumb {
  z-index: 0 ;
}

.myDiv{
  z-index: 1;
}

    html

    ...
<div class="myDiv"
  cdkDrag
...

    demo

    As this can be a bit confusing if you have other sliders, add a class on this one, so you can be more precise in the styling