Range input block event

by Emanuele del Grande

HTML

<h1>JS/CSS Slider</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" onclick="interactionClick();" />
        </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>

CSS

body { font: 14px Roboto; }
    
}#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: col-resize;
	border: solid 1px black;
	width: 1px;
	height: 100%;
}
/**********************************/

JavaScript

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

setViewPort(slider.value);

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

slider.onclick = function(){
	//alert('clicked!');
}

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