Range input block event

HTML

<html>
<body>
<h1>
First Try
</h1>
<p>
As you can see the style is pretty what I want, but the onClick can't be triggered, the range is moving instead.
</p>
<div id='mainContainer'>
  <div id="containerSlider">
    <input id='sliderInput' type='range' min="0" max="100" value="50" class="slider" name="slider">
  </div>
  <div id='containerImg'>
    <div id='interactionImg'>
    </div>
  </div>
  <div id='containerImgSliding'>
    <img id='slidingPic' src='https://lh3.googleusercontent.com/-6_s8v5BANJ8/WpA1LeGF6VI/AAAAAAAAArs/6gTI0HZrksEkw93cZ0xNO0IdSB4xH1PBACJoC/w530-h525-n-rw/pikachu.jpg'>
  </div>
</div>

</body>
</html>

CSS

#mainContainer, #mainContainer2{
  width: 300px;
  height: 300px;
  position: absolute;
}

#secondTry{
  position: absolute;
  top: 450px;
}

/*First image, the one not moving*/
#containerImg{
  width: 100%;
  height: 100%;
  position: absolute;
}

#interactionImg, #interactionImg2{
  background-image: url('https://lh3.googleusercontent.com/-b8NpnEkfdPo/WpA1OLbOqXI/AAAAAAAAAsA/7199VuCoF-I8tVYgs1vqcqWFiyyCFh7WwCJoC/w530-h535-n-rw/mobil_suit.jpg');
  background-size: 100%;
  width: 100%;
  height: 100%;
}
/******************************/

/*The moving image*/
#containerImgSliding{
  pointer-events: none;
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}

#slidingPic{
  width: 300px;
  height: 300px;
}
/**********************************/

/*The slider*/
#containerSlider{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
}

#sliderInput{
  width:100%;
  height: 100%;
}

input[type=range]:focus{
	outline: none;
}

input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
	left: 0px;
	width: 100%;
	height: 100%;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	cursor: pointer;
	border: solid 1px black;
	width: 1px;
	height: 100%;
}
/**********************************/

JavaScript

var slider = document.getElementById('sliderInput')
var main = document.getElementById('mainContainer')
var interaction = document.getElementById('interactionImg')

setViewPort(slider.value)

slider.oninput = function(){
	setViewPort(this.value)
}

interaction.onclick = function(){
	alert('clicked!')
}

//For sliding
function setViewPort(pourcentage){
var width = main.offsetWidth*(pourcentage/100)
  document.getElementById('containerImgSliding').style.width = width+'px'
}