Languages involved: HTML, CSS, JS

Context: I'm relatively new to web development. I have two elements overlapping each other. One is a slider, one is a div. The slider is on top of the div.

Code snippets:

```
<div id="myDiv">
  <input id="mySlider" type="range" min=1 max=100 step=1>
</div>

```

and

```
initListeners() {
  document.getElementById("myDiv").addEventListener("click", divFunction);
  document.getElementById("mySlider").addEventListener("input", sliderFunction);
}

```

I need to make it that when you click the slider, it doesn't click the div. How would I go about doing that? I've tried z-index, but that doesn't seem to change anything.

Thanks in advance!