JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

initListeners();

function divFunction(e) {
	console.log('Firing...') // <-- delete this line and it'll log 'hit' only if the div is clicked
	if (e.target !== this) {
    return;
  } else {
    console.log('hit');
	}
}

function sliderFunction() {
	console.log('Doing stuffs...');
}