1

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?

Vega
  • 27,856
  • 27
  • 95
  • 103
ufk
  • 30,912
  • 70
  • 235
  • 386

2 Answers2

1

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

Vega
  • 27,856
  • 27
  • 95
  • 103
  • thanks it work in my stackblitz. in my own project for some reason i needed to add z-index:0 for div.mat-slider-thumb-container – ufk Jul 05 '22 at 07:46
0
I inspected your Stackblitz url. There I found that value of

z-index is set 1 for dark dot. Below is the css for your reference. .mat-slider-thumb-container { position: absolute; z-index: 1; transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1); }

If you will remove unnecessary 'z-index: 1;' css , then it will work fine.

You need not to add z-index. Hope this answer helped you.
Web Dev by Ihr
  • 1
  • 1
  • hi, thanks for the info, the .mat-slider-thumb-container is actually part of angular material, that's why i stated in my comment that i needed to set the z-index of that container to 0. – ufk Jul 05 '22 at 08:32