我想创建一个范围 slider ,它有一个 div 元素跟随范围拇指。此 div 元素将包含范围输入的当前值。我将如何着手做这样的事情?我研究了 slider 的样式,但不知道如何将实际元素添加到拇指上。它看起来像这样,请原谅我糟糕的绘画能力:
编辑:拖动 slider 时应更新以下 div。 更新:我有一个很好的原型(prototype),但似乎无法让它完美地跟随 slider 。它会偏离中心几个像素,具体取决于它在轨道上的位置。 Heres my codepen
更新代码
HTML
<div id="slider-cntnr">
<input type="range" id="frame-slider" oninput="updateFollowerValue(this.value)"/>
<div id="slider-follow">
<div id="slider-val-cntnr">
<span id="slider-val"></span>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
}
#slider-cntnr {
width: 50%;
margin: 40px;
position: relative;
}
#frame-slider {
width: 100%;
margin: 0;
}
#slider-follow {
margin-left: -14px;
background-color: black;
width: 30px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
#slider-val-cntnr {
background-color: white;
width: 25px;
height: 20px;
}
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 + '%';
};
updateFollowerValue(slider.value);
最佳答案
如果您不支持旧浏览器,您可以利用
<input type="range">
和一些 JavaScript 来跟随它。查看我的代码笔:http://codepen.io/abhisharma2/pen/wMOpqz
关于javascript - 使用包含当前值的 float DIV 自定义 HTML 范围输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35419235/