我有一个 slider 可以实时更新其右侧标签上的值。当值从 1 位值变为 2 位值时,我应该怎么做才能防止它“跳跃”?我怎样才能给标签一个固定的位置,这样它就不会改变布局:
var range = document.getElementById('range');
range.addEventListener('input', rangeChange);
function rangeChange() {
label.innerHTML = this.value;
}
<label id="label">0</label>
<input id="range" type="range" value=0 min=0 max=100>
最佳答案
要么在标签中添加 width: 20px;display: inline-block;
。
或者
在这两个元素周围添加一个包装器并给它们 display: flex; align-items: center;
标签的样式和宽度。
var range = document.getElementById('range');
range.addEventListener('input', rangeChange);
function rangeChange() {
label.innerHTML = this.value;
}
<div style="display: flex; align-items: center;">
<label id="label" style="width: 20px;">0</label>
<input id="range" type="range" value=0 min=0 max=100>
</div>
关于javascript - 更改值时防止 slider 跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50639375/