HTML 范围输入在尝试移动时无响应

HTML range input is unresponsive on attempts to move

本文关键字：移动 响应 范围 输入 HTML      更新时间：2023-09-26

当我尝试在轨道上移动拇指时，没有任何反应。我在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);

添加以下 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;
}

请参阅代码笔

向滑块输入添加margin-top。当前，鼠标抓取的是图像，而不是滑块位。

相关文章：