I am having an issue where the thumb on the slider does not move when I try to. This problem occurred after I inserted an img element inside the slider-cntnr div. View the code at http://codepen.io/danielyaa5/pen/xVEXvB
HTML
<div id="slider-cntnr">
<img id="slider-background" src="http://imagej.1557.x6.nabble.com/file/n5009735/OCT_pre_segmented.png"></img>
<input type="range" id="frame-slider" oninput="updateFollowerValue(this.value)" />
<div id="slider-follow-cntnr">
<div id="slider-follow">
<div id="slider-val-cntnr">
<span id="slider-val"></span>
</div>
</div>
</div>
</div>
CSS
html,
body {
width: 100%;
height: 100%;
}
#slider-cntnr {
height: 150px;
width: 50%;
margin: 40px;
position: relative;
display: flex;
flex-direction: column;
}
#frame-slider {
width: 100%;
margin: 0;
}
#slider-follow-cntnr {
position: relative;
height: 10px;
margin: 0 auto;
width: 98%;
}
#slider-follow {
background-color: black;
width: 30px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
margin-left: -15px;
}
#slider-val-cntnr {
background-color: white;
width: 25px;
height: 20px;
}
#slider-val {
margin-left: 9px;
}
#slider-background {
max-width: 100%;
max-height: 100%;
}
JS
var follower = document.getElementById('slider-follow');
var follower_val = document.getElementById('slider-val');
var slider = document.getElementById('frame-slider');
var updateFollowerValue = function(val) {
follower_val.innerHTML = val;
follower.style.left = (val*1) + '%';
};
updateFollowerValue(slider.value);