javascript - 更改值时防止 slider 跳跃

Question

我有一个 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>

Answer 1

要么在标签中添加 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>