javascript - HTML 范围输入对移动尝试无响应

Question

当我尝试在轨道上移动拇指时，没有任何反应。我在 slider-cntnr div 中添加了一个 img 后它停止工作了。 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);

Answer 1

添加以下 CSS 将使其工作。

#slider-cntnr input{
  position:relative;
}

我还添加了以下内容，因为不小心拖动图像可能会很烦人。

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

参见 codepen