我花了一些时间在一个 slider 上,它有一个 div 跟随 slider 的拇指。为此,我为跟随者创建了一个相对定位的容器(称为 #slider-follower-cntnr
)。然后我根据范围输入的值调整跟随者 div (#slider-follower
) 的位置。问题在于,当您在轨道上移动拇指时,从动件不会完全居中于拇指的位置。我试过调整 #slider-follower-cntnr
的宽度,但我不知道如何找到正确的宽度以使其完美居中。感谢您的帮助。
TL/DR:如何让 follower div 完全居中于所有范围值的范围输入的拇指?
Heres a codepen.当您沿着范围拉动它时,您可能需要全屏才能看到它偏离中心。
HTML
<div id="slider-cntnr">
<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>
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
html, body {
width: 100%;
height: 100%;
}
#slider-cntnr {
width: 80%;
margin: 40px;
position: relative;
display: flex;
flex-direction: column;
background: orange;
}
#frame-slider {
width: 100%;
margin: 0;
}
#slider-follow-cntnr {
position: relative;
background-color: blue;
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;
}
最佳答案
解决这个问题的几种方法:
(1) 在 HTML 中
<div id="slider-val-cntnr">
<center>
<span id="slider-val"></span>
</center>
</div>
(2) 在 CSS 中
#slider-val {
margin-left: auto;
margin-right: auto;
}
(1) HTML 方法可能效果最好,但使用 <center>
通常不是最佳实践。整个 HTML 中的标记。
(2) 这将确保数字永远不会超出它所在的白框的边界。如果您不关心它是否绝对居中,并且只想让数字不超出白框,那么这是一个合适的解决方案。
关于javascript - 如何在 Vanilla JavaScript 中使我的自定义范围/ slider 随动器 div 与范围拇指完美居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35490540/